Vue 2项目中Vuex模块state调用mutation后未更新是什么原因

问题根因 #

你代码中mutation的写法存在错误，导致状态变更无法被Vuex感知：
state = { ...state, ...nextState, loaded: true };属于对mutation的state形参重新赋值，函数的形参只是Vuex内部state对象的引用副本，你把这个副本指向新的对象，完全不会修改Vuex实际持有的state对象，所以状态不会发生任何更新。

Vue 2的响应式和Vuex的规则都要求你直接修改原state对象的属性，而不能替换整个state的引用。

修复方案 #

方案1：直接修改对应属性（最稳妥） #

如果属性已经在模块初始化的state中提前声明，直接逐个赋值即可：

const mutations: MutationTree<TestState> = {
  SET_TEST(state, nextState: TestState) {
    console.log("current", state);
    console.log("next", nextState);
    state.test = nextState.test;
    state.loaded = true;
  },
};

方案2：批量合并属性到原state对象 #

如果需要一次性更新多个属性，使用Object.assign修改原state对象，不要生成新对象赋值给形参：

const mutations: MutationTree<TestState> = {
  SET_TEST(state, nextState: TestState) {
    Object.assign(state, nextState, { loaded: true });
  },
};

额外注意事项 #

如果test属性没有在test模块初始化的state中提前声明，Vue 2的响应式系统无法监听这个新增属性的变更，需要使用Vue.set来添加新属性：

import Vue from "vue";

const mutations: MutationTree<TestState> = {
  SET_TEST(state, nextState: TestState) {
    Vue.set(state, 'test', nextState.test);
    state.loaded = true;
  },
};

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