Question

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

但是，如果用户在浏览器中单击重新加载按钮（以重新加载主页），则用户值将设置为“ 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>

store / 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，则工具栏行为正确。 ...用户为空

 export const state = {
     user: null,

Vue.js问题，带有计算属性uon Chrome浏览器重新加载页面

1 个答案: