Vue.js проблема с вычисляемым свойством на странице перезагрузки браузера Chrome

Question

У меня проблема с компонентом панели инструментов. После выхода из системы пользователь сбрасывается в ноль, и маршрутизатор запускает домашнюю страницу. Одна вкладка на панели инструментов привязана к пользовательскому значению (user === null) Домашняя страница отображается правильно ... и администратор может снова войти в систему, если требуется.

НО, если пользователь нажимает кнопку перезагрузки в браузере (чтобы перезагрузить домашнюю страницу), тогда пользовательское значение устанавливается на «ложь» (???), поэтому условие в Tolbar теперь ложно ....

Почему это значение пользователя сбрасывается на "ложь" при перезагрузке ... Это проблема с кешем? если да, как это решить?

спасибо за отзыв

Toolbar.vue компонент

<template>
...
      <!--  MENU MEMBERS - UNAUTHENTICATED  -->
      <v-btn v-if="showMembers && (user === null)" flat @click="$router.push(menuItems[2].link)">
        <v-icon left>{{ menuItems[2].icon }}</v-icon>
        <span>{{ menuItems[2].title | translate }}</span>
      </v-btn>
...
</template>


<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Toolbar',
  props: ['appName', 'menuItems'],
  computed: {
    ...mapGetters(['sideNav', 'showAssociation', 'showMembers', 'showBlog', 'showShopping', 'user'])
  },
  methods: {
    ...
    onLogout () {
      this.$store.dispatch('logout')
        .then(() => {
          this.$router.push('/home')
        })
    }
  }
</script>

магазин / root.js // действия

 export const actions = {
 ...
 logout ({commit}) {
    firebase.auth().signOut()
      .then(() => {
        console.log('SIGNED OUT')
        commit(types.SET_USER, null)
      }, function (error) {
        console.error('Sign Out Error', error)
      })
  }
  ...
  export const mutations = {
   ... 
   [types.SET_USER] (state, payload) {
      state.user = payload
      localStorage.setItem('user', payload)
    },
   ...
     ...firebaseMutations
   }

Answer 1

В y store / root.js я инициализировал пользовательское состояние таким образом

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

Если я не использую localStorage, то поведение панели инструментов будет правильным. ... пользователь null

 export const state = {
     user: null,