store.state中的用户和帐户数据&&在localStorage（）中

Question

我实际上不理解当用户在Web浏览器上点击thr重新加载页面时会发生什么...

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

请参阅console.log

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

console.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')
            })

console.log

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中的用户和帐户数据&&在localStorage（）中

现在，当用户在浏览器中重新加载页面按钮时，

console.log

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突变代码---- 如果（localStorage.getItem（'store'））{ //将状态对象替换为存储的项目 console.log（'mutation initialise_store'） this.replaceState（Object.assign（state，JSON.parse（localStorage.getItem（'store'））））） }

console.log

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

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

用户和帐户数据位于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>

Answer 1

已解决...

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

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

store.state中的用户和帐户数据&&在localStorage（）中

用户和帐户数据位于store.state &&在localStorage（）

1 个答案: