Vuex Store State无法更新，仅Token生效问题求助

问题根源分析 #

1. mutation赋值逻辑错误
   你的API返回的userData.data是包含user、extension等字段的完整用户信息对象，但当前mutation里仅把userData.data.user（字符串"agent 1"）赋值给state.user.data，这不仅丢失了其他用户信息，还将原本的对象类型覆盖为字符串，导致后续无法正确获取完整用户数据。

2. 组件展示逻辑不匹配
   计算属性username返回的是整个user对象，模板直接渲染对象会显示[object Object]或对象JSON结构，容易让你误以为state未更新，实际可能是展示方式有误。

修复步骤 #

1. 修正mutation的赋值逻辑 #

将state.user.data的赋值改为整个API返回的data对象，保存完整用户信息：

mutations: {
    setUser: (state, userData) => {
        state.user.token = userData.token;
        // 赋值完整的用户数据对象，而非单一字段
        state.user.data = userData.data;
        sessionStorage.setItem('TOKEN', userData.token);
    },
}

2. 调整组件计算属性与模板展示 #

如果要展示用户名，计算属性应返回具体的user.data.user字段，而非整个user对象：

computed: {
    username() { 
        // Vue2需用this.$store，Vue3选项式API同理，组合式API用useStore获取store实例
        return this.$store.state.user.data.user; 
    }
}

模板保持原有结构即可：

<template>
    <div class="setting">
        <p>User: </p><span>{{ username }}</span>
    </div>
</template>

3. Vue2响应式兼容（可选） #

如果使用Vue2，若直接赋值仍存在响应式问题，可使用Vue.set确保状态更新被监听：

import Vue from 'vue'
mutations: {
    setUser: (state, userData) => {
        Vue.set(state.user, 'token', userData.token);
        Vue.set(state.user, 'data', userData.data);
        sessionStorage.setItem('TOKEN', userData.token);
    },
}

Vue3因使用Proxy代理，直接赋值即可触发响应式，无需额外处理。

内容的提问来源于stack exchange，提问作者it'Simon