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

我真的不明白当用户点击网页浏览器上的重新加载页面时会发生什么

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

请参阅console.log

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

          // --- 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')
            })

控制台日志

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: {…}, …}

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 {…}

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

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

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

          // --- 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')
            })

控制台日志

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: {…}, …}

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 {…}

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

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

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

store.state和localStorage（）中的用户和帐户数据 但现在当用户在浏览器中点击“重新加载页面”按钮时

控制台日志

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: {…}, …}

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 {…}

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

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

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

控制台日志

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: {…}, …}

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 {…}

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

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（）中 构件视图-截面1构件

      <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>

....
....
....
从“vuex”导入{mapGetters}
....
计算：{
…映射器（['user'，'account']），
...

已解决

我的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获取对象