Vue.js Vuex Firebase - Не могу понять, почему данные магазина не доступны на странице перезагрузки браузера

Question

Я на самом деле не понимаю, что происходит, когда пользователь нажимает на страницу перезагрузки в веб-браузере ...

Получение данных пользователя, отображаемых после первого входа в систему, в порядке ... данные 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 ---- if (localStorage.getItem ('store')) { // Заменить объект состояния сохраненным элементом console.log ('мутация 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-модели и геттеров)

данные пользователя и учетной записи находятся в 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

решено ...

my 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 после обновления страницы