登录/登出后Vuex状态不更新，Header组件按钮未切换

Header组件中你在data里初始化了isAuth和user，这两个值仅在组件创建时从Vuex state中读取一次。当Vuex中的认证状态更新后，data里的变量不会自动同步，导致模板无法感知状态变化，所以按钮不会更新，只有刷新页面重新创建组件时才会读取最新状态。

将data中的isAuth和user替换为计算属性，计算属性会自动监听Vuex状态的变化并实时更新，从而触发模板重新渲染。

修改Header.vue代码 #

方式1：使用Vuex Getters（推荐） #

利用你已经定义好的auth模块getters，通过mapGetters映射到组件中：

<template>
    <div class="utf_right_side">
        <div class="header_widget">
            <router-link :to="{name:'login'}" class="button border sign-in popup-with-zoom-anim" v-if="!authenticated">
                <i class="fa fa-sign-in"></i>Login
            </router-link>
            <a class="button border sign-in popup-with-zoom-anim" v-if="authenticated" href="" @click.prevent="logout">
                <i class="fa fa-sign-in"></i>Logout
            </a>
            <a href="dashboard_add_listing.html" class="button border with-icon">
                <i class="sl sl-icon-user"></i> Add Listing
            </a>
        </div>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
    name:"default-layout",
    computed: {
        ...mapGetters('auth', ['authenticated', 'user'])
    },
    methods:{
        ...mapActions({
            signOut:"auth/logout"
        }),
        async logout() {
            await axios.post('/logout').then(({data})=>{
                this.signOut();
            })
        },
    },
}
</script>

方式2：直接基于Vuex State创建计算属性 #

如果不想用getters，也可以直接在计算属性中读取Vuex state：

<script>
import { mapActions } from 'vuex'
export default {
    name:"default-layout",
    computed: {
        isAuth() {
            return this.$store.state.auth.authenticated
        },
        user() {
            return this.$store.state.auth.user
        }
    },
    methods:{
        ...mapActions({
            signOut:"auth/logout"
        }),
        async logout() {
            await axios.post('/logout').then(({data})=>{
                this.signOut();
            })
        },
    },
}
</script>

模板部分可保持原有写法，继续使用isAuth变量。

• 计算属性是响应式的，只要依赖的Vuex状态发生变化，计算属性就会自动重新计算，模板也会随之更新。
• 登出方法中的this.$parent.forceRerender()可直接移除，状态变化会自动触发组件的响应式更新。

内容的提问来源于stack exchange，提问作者MD5