Javascript 登录注销后Vuex状态不会改变

我想在标题组件中显示不同的按钮，基于用户身份验证

Header.vue个

<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="!isAuth"><i class="fa fa-sign-in"></i>Login</router-link>
            <a class="button border sign-in popup-with-zoom-anim" v-if="isAuth" href="" @click.prevent="logout" :key="componentKey"><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} from 'vuex'
    export default {
        name:"default-layout",
        data(){
            return {
                user:this.$store.state.auth.user,
                isAuth: this.$store.state.auth.authenticated,
            }
        },
        methods:{
            ...mapActions({
                signOut:"auth/logout"
            }),
            async logout() {
                await axios.post('/logout').then(({data})=>{
                    this.signOut();
                    this.$parent.forceRerender();
                })
            },
        },

    }

</script>

正如您所看到的，根据来自VUEX状态的变量isAuth，我想显示不同的按钮，但在登录后状态不变，它仍然显示旧的按钮(在身份验证之前).如果我手动刷新页面(F5)，它会显示正确的按钮.

Login.vue:个

<script>
import { mapActions } from 'vuex'
export default {
    name:"login",
    data(){
        return {
            auth:{
                email:"",
                password:""
            },
            validationErrors:{},
            processing:false
        }
    },
    methods:{
        ...mapActions({
            signIn:'auth/login'
        }),
        async login(){
            this.processing = true
            await axios.get('/sanctum/csrf-cookie')
            await axios.post('/login',this.auth).then(({data})=>{
                this.signIn()
            }).catch(({response})=>{
                if(response.status===422){
                    this.validationErrors = response.data.errors
                }else{
                    this.validationErrors = {}
                    alert(response.data.message)
                }
            }).finally(()=>{
                this.processing = false
            })
        },
    }
}
</script>

vuex auth.js包含在index.js vuex文件中:

import axios from 'axios'
import router from '@/router'

export default {
    namespaced: true,
    state:{
        authenticated:false,
        user:{}
    },
    getters:{
        authenticated(state){
            return state.authenticated
        },
        user(state){
            return state.user
        }
    },
    mutations:{
        SET_AUTHENTICATED (state, value) {
            state.authenticated = value
        },
        SET_USER (state, value) {
            state.user = value
        }
    },
    actions:{
        login({commit}){
            return axios.get('/api/user').then(({data})=>{
                commit('SET_USER',data)
                commit('SET_AUTHENTICATED',true)
                router.push({name:'home'})
            }).catch(({response:{data}})=>{
                commit('SET_USER',{})
                commit('SET_AUTHENTICATED',false)
            })
        },
        logout({commit}){
            commit('SET_USER',{})
            commit('SET_AUTHENTICATED',false)
        }
    }
}

因此，当用户登录时，它在auth.js中进入登录方法，并设置正确的状态，如下所示:

        commit('SET_USER',data)
        commit('SET_AUTHENTICATED',true)|

之后，它重定向到名为Home的路由，但页眉仍然显示旧按钮，当我刷新页面时，显示正确的按钮.