时间戳

首页 > 解决方案 > Vue.js Vuex Firebase - 无法理解为什么商店数据在浏览器重新加载页面上不可用

firebase - Vue.js Vuex Firebase - 无法理解为什么商店数据在浏览器重新加载页面上不可用

问题描述

我实际上不明白当用户在网络浏览器上点击重新加载页面时会发生什么......

在第一次登录后显示用户数据是可以的...... store.state 数据可用（localStorage 缓存数据也是如此）但是如果我重新加载页面，即使 store.sate 数据可用，它们也不再显示..

查看控制台.log

=== 开始显示主页 ====================

控制台日志

ROUTER BEFORE to:  
{name: "Home", meta: {…}, path: "/home", hash: "", query: {…}, …}

App.vue?26cd:72 APP VUE - beforeCreate initialiseStore

root.js?f07d:207 mutation initialise_store

main.js?1c90:61 MAIN.JS FB auth().onAuthStateChanged() - user not logged in

root.js?f07d:112 STORE ACTION setUser:  null

backend.js:1  vue-devtools  Detected Vue v2.5.16 

router.js?15ee:71 ROUTER BEFORE to:  
{name: "Users", meta: {…}, path: "/users", hash: "", query: {…}, …}

=== 用户视图 - 显示登录表单 ========

          // --- onSubmit method code ----
          onSubmit()
          ....
          this.$store.dispatch('signUserIn', { email: this.email, password: this.password })
            .then(result => {
              console.log('SIGNIN SUCCESSFUL: ', result)
              this.$router.push('member')
            })

控制台日志

main.js?1c90:59 MAIN.JS FB auth().onAuthStateChanged() - user authenticated
store/root.js?f07d:104 END SIGNIN PROCESS
Sectio1.vue?91e7:191 SIGNIN SUCCESSFUL:  ok

router.js?15ee:71 ROUTER BEFORE to:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:73 ROUTER protected page:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:79 ROUTER user authenticated:  
Lk {…}

== 会员视图 - 显示用户/帐户数据 ======== 显示用户和帐户数据

store.state && in localStorage() 中的用户和帐户数据

但是现在当用户在浏览器中点击重新加载页面按钮时

控制台日志

ROUTER BEFORE to:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:73 ROUTER protected page:  
{name: "Member", meta: {…}, path: "/member", hash: "", query: {…}, …}
router.js?15ee:79 ROUTER user authenticated:  {"uid":"kRdsicIfuRYSTj2sWxfejhMevtr2","displayName":null,"photoURL":null,"email":"john.doe@example.com","emailVerified":false,"phoneNumber":null,"isAnonymous":false,"providerData":[{"uid":"john.doe@example.com","displayName":null,"photoURL":null,"email":"john.doe@example.com","phoneNumber":null,"providerId":"password"}],"apiKey":"AIzaSyBhOu_bc_8NdQW7EOEFHfjljLnNwbu3guk","appName":"[DEFAULT]","authDomain":null,"stsTokenManager":{"apiKey":"AIzaSyBhOu_...9ufFog","expirationTime":1530868322723},"redirectEventId":null,"lastLoginAt":"1530864722000","createdAt":"1530111422000"}

App.vue?26cd:72 APP VUE - beforeCreate initialiseStore
store/root.js?f07d:207 mutation initialise_store

// --- initialise_store 变异代码 ---- if (localStorage.getItem('store')) { // 用存储的项目替换状态对象 console.log('mutation initialise_store') this.replaceState(Object.assign （状态，JSON.parse（localStorage.getItem（'store'））））}

控制台日志

backend.js:1  vue-devtools  Detected Vue v2.5.16 
main.js?1c90:59 MAIN.JS FB auth().onAuthStateChanged() - user authenticated

== 会员视图 - 显示用户/帐户数据 ======== 未显示用户和帐户数据（使用 v-model 和 getter）

用户和帐户数据在 store.state && 中 localStorage()

成员视图 - Section1 组件

      <template>
         ....
         <v-card-text class="grow">
             <v-text-field disabled v-model="user.email" ....></v-text-field>
             <v-text-field disabled v-model="user.name" ....></v-text-field>
         ....
            <v-text-field disabled v-model="account.givenName" ....></v-text-field>
         ....
      </template>

      <script>
      import { mapGetters } from 'vuex'
      ....
      computed: {
        ...mapGetters(['user', 'account']),
      ...
      <s/cript>

标签： firebasefirebase-realtime-databasevue.jsvuex

解决方案

解决了 ...

我的 store.state 初始化如下：

export const state = {
    .. 
    user: localStorage.getItem('user') || null,
    account: localStorage.getItem('account') || null

这是错误的用户和帐户是 Firebase 对象，应将其解析为字符串存储在 localStorage ...

 export const state = {
    .. 
    user: JSON.parse(localStorage.getItem('user')) || null,
    account: JSON.parse(localStorage.getItem('account')) || null

刷新页面后，可以从 localStorage 获得对象

推荐阅读