Vue.js 在 Chrome 浏览器重新加载页面上的计算属性问题答案

【问题标题】：Vue.js issue with computed property uon Chrome browser reload pageVue.js 在 Chrome 浏览器重新加载页面上的计算属性问题
【发布时间】：2018-12-07 18:00:50
【问题描述】：

我的工具栏组件有问题。注销后，用户将重置为 null，并且路由器会触发主页。工具栏中的一个选项卡绑定到用户值（user === null）主页已正确显示...如果需要，用户可以再次登录。

但是，如果用户点击浏览器中的重新加载按钮（重新加载主页），则用户值设置为“false”（???），因此 Tolbar 中的条件现在为 false ...。

为什么这个用户值在重新加载时重置为“false”... 是缓存问题吗？如果是，如何解决？

感谢反馈

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
   }

【问题讨论】：

标签： caching vue.js vuex

【解决方案1】：

在 y store/root.js 中，我以这种方式初始化了用户状态

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

如果我不使用 localStorage，那么工具栏的行为是正确的。 ...用户为空

 export const state = {
     user: null,

【讨论】：