Vue.js中Store状态更新后视图未更新问题求助

嘿，我仔细看了你的代码，发现几个关键问题导致视图没有同步更新，咱们一个个来 fix：

1. 计算属性里的拼写错误 #

你在组件计算属性里写的是 tokenToCHeck（注意大写的H），但Vuex state里的属性名是 tokenToCheck，这直接导致组件拿不到正确的state值，视图自然不会更新！先把这个拼写错误修正：

computed: {
    // ...其他计算属性
    tokenToCheck() {
        // 修正拼写：tokenToCHeck → tokenToCheck
        return this.$store.state.tokenToCheck;
    }
}

2. 组件data里的test不会自动更新 #

你把test放在了data里，它只会在组件初始化时读取一次localStorage的token，之后localStorage或Vuex state变化时，它不会自动同步。把它改成计算属性，直接从Vuex state取，就能实现响应式更新了：

// 去掉data里的test，添加到computed中
computed: {
    // ...其他计算属性
    test() {
        return this.$store.state.tokenToCheck;
    }
}

3. 登录成功后要同步更新Vuex state #

你之前只把token存在localStorage，但Vuex state里的tokenToCheck不会自动同步localStorage的变化。需要新增一个mutation来更新state里的token，并且在登录成功时调用它：

修改store.js，新增SET_TOKEN mutation #

export const store = new Vuex.Store({
    state: {
        tokenToCheck: localStorage.getItem('token'),
        isValid: 'test',
        isLogged: true
    },
    getters: {
        isLogged: (state) => state.isLogged
    },
    mutations: {
        CHECK_TOKEN(state) {
            try{
                jwt.verify(state.tokenToCheck, 'RANDOM_TOKEN');
                state.isValid = 'ok';
                state.isLogged = true;
                // 这里的return没用，Vuex mutations不需要返回值，删掉它
            } catch(error) {
                console.log(error);
                console.log(state.tokenToCheck);
                console.log('erreur test token');
                state.isValid = "expiry";
                state.isLogged = false;
            }
        },
        // 新增：更新token的mutation
        SET_TOKEN(state, token) {
            state.tokenToCheck = token;
            localStorage.setItem('token', token); // 同时存到localStorage
        }
    }
});

登录成功时调用mutation #

比如你在登录接口请求成功后，执行：

// 假设后端返回的token存在response.data.token里
this.$store.commit('SET_TOKEN', response.data.token);
this.$store.commit('CHECK_TOKEN'); // 校验新的token

关于Vue.set的疑问 #

你担心的Vue.set确实是用于给对象添加新的响应式属性，或者修改数组的索引值（因为Vue默认无法检测数组索引的变化）。但你的Vuex state里的属性都是初始化时就定义好的，所以只要通过mutation修改这些属性，Vuex的响应式系统会自动检测到变化，不需要用Vue.set~

最后再检查一遍 #

• 确保所有需要动态展示的状态都从Vuex state/getter通过计算属性获取
• 所有state的修改都通过mutation完成（不要直接修改state）
• 避免低级的拼写错误，这往往是最容易忽略但影响最大的问题

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