$存储状态需要重新加载页面才能更新VUEJ

我只进行一次登录,在响应之后,菜单头会更新,它应该显示用户名。

菜单按预期更改,但只有在我自己重新加载页面(F5)后才会显示用户名。

这是我的代码:

登录.vue

....
<script>
export default {
    data() {
        return {
            email: '',
            password: '',
            type: 1
        }
    },
    methods: {
        login() {
            this.$store.dispatch('retrieveToken', {
                email: this.email,
                password: this.password,
                type: this.type
            })
            .then(response => {
                this.$router.push({name: 'search'});
            })
            .catch(error => {
                console.log(errorMessage);
            })
        }
    }
}
</script>

商店.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        user_id: localStorage.getItem('user_id') || null,
        fname: localStorage.getItem('fname') || null,
        lname: localStorage.getItem('lname') || null,
        email: localStorage.getItem('email') || null,
        type: localStorage.getItem('type') || null,
        token: localStorage.getItem('token') || null
    },
    getters: {
        loggedIn(state) {
            return (state.token == null) ? false : true
        },
        isCustomer(state) {
            return (state.type == 1) ? true : false
        },
        isPartner(state) {
            return (state.type == 2) ? true : false
        }
    },
    mutations: {
        retrieveToken(state, data) {
            state.user_id = data.user_id
            state.fname = data.name
            state.lname = data.name
            state.email = data.email
            state.type = data.type
            state.token = data.access_token
        }
    },
    actions: {
        retrieveToken(context, credentials) {
            let userData = []
            let userCredentials = {
                user_credencial: {
                    email : credentials.email,
                    password: credentials.password,
                    type : credentials.type
                }
            }

            return new Promise((resolve, reject) => {

                axios.post(process.env.VUE_APP_API_AUTH, userCredentials)
                .then(response => { // Credentials resolved
                    let user_id = response.data.objeto.user.id_user,
                        fname = response.data.objeto.profile.f_name,
                        lname = response.data.objeto.profile.l_name,
                        // type = response.data.objeto.user.type,
                        token = response.data.objeto.access_token.token;

                    // Storing Auth data
                    userData.user_id = user_id
                    userData.fname = fname
                    userData.lname = lname
                    userData.type = credentials.type
                    userData.email = credentials.email
                    userData.access_token = token

                    localStorage.setItem('user_id', userData.user_id)
                    localStorage.setItem('fname', userData.fname)
                    localStorage.setItem('lname', userData.lname)
                    localStorage.setItem('email', userData.email)
                    localStorage.setItem('type', userData.type)
                    localStorage.setItem('access_token', userData.access_token)

                    context.commit('retrieveToken', userData)
                    return resolve(response)
                })
                .catch(error => {
                    return reject(error)
                })
            })

        }
    }
})

<ul v-if="isPartner">
  <base-dropdown tag="li">
    <span slot="title">¡Hola, <strong class="text-primary">{{this.$store.state.fname}}</strong>!</span>
  </base-dropdown>
</ul>

<script>
export default {
    computed: {
        isCustomer() {
            return this.$store.getters.isCustomer
        },
        isPartner() {
            return this.$store.getters.isPartner
        }
    }
};
</script>

同时,我试图在页眉.vue调用loggedName来检索用户名,就像我用isCustomer和isPartner(更改显示的菜单)一样,但是我得到了相同的结果:需要F5在菜单上显示用户名。

有什么想法吗?