Vuex登录后导航栏数据未更新，需刷新页面求助

问题根源 #

直接通过Vue.set(this.$store.state, 'user', res.data)修改Vuex state的方式不符合Vuex状态管理规范，会导致响应式更新失效——Vuex要求状态变更必须通过mutation触发，才能保证组件感知到状态变化。另外，初始store中user对象的属性未初始化，也会影响响应式追踪。

修复步骤 #

1. 完善Vuex Store，添加状态变更的mutation

修改store.js，初始化user为null，并添加更新user的mutation：

export default new Vuex.Store({
  state: {
    // 初始化为null，避免未定义属性导致响应式问题
    user: null
  },
  mutations: {
    // 定义更新user的mutation
    SET_USER(state, userData) {
      state.user = userData
    }
  }
})

2. 在App.vue中通过mutation更新状态

替换直接修改state的代码，调用Vuex的commit方法触发mutation：

axios.get(process.env.VUE_APP_API_URL + '/api/', config).then((res) => {
    this.$cookies.set('user', res.data);
    // 调用mutation更新user状态
    this.$store.commit('SET_USER', res.data)
}).catch(function (error) {
    if (error.response) console.log(error.response.data);
});

3. 优化导航栏的判断逻辑

保持导航栏组件的computed属性不变，优化视图判断逻辑（直接判断user是否存在，更严谨）：

<template>
  <NavItem v-if="user" href="/dashboard" class="rounded-lg hover:bg-gray-700 duration-500 transition-all">
    <span class="mr-3">{{user.name}}</span>
    <img class="rounded-full" width="32" :src="'https://cdn.discordapp.com/avatars/' + user.id + '/' + user.avatar + '.png'"/>
  </NavItem>
  <NavItem v-else href="/login" icon="login" :hover="true">Login</NavItem>
</template>

<script>
export default {
    name: 'Navbar',
    computed: {
        user () {
            return this.$store.state.user;
        }
    },
}
</script>

修复原理 #

• Vuex通过mutation统一管理状态变更，确保状态变化能被Vue的响应式系统追踪，触发组件视图更新。
• 将初始user设为null，避免了原代码中未定义属性导致的响应式追踪失效问题。
• 触发mutation后，导航栏的computed属性会自动感知store中user的变化，实时更新视图，无需刷新页面。

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