Vue3中测试Vuex Mutation遇状态不更新问题求助

问题根源 #

你当前的Object.assign(state, loading)写法逻辑错误：loading是布尔值，而Object.assign仅接受对象类型作为源参数，原始值会被直接忽略，导致state.loading完全没被修改，测试自然失败。

另外，Vue3的响应式基于Proxy实现，对于Vuex state中已预先声明的属性，直接赋值就能保持响应式，不需要用Vue.set或Object.assign（除非是批量更新多个属性）。

正确写法 #

单属性更新（你的场景）

直接给state.loading赋值即可：

export const mutations: MutationTree<UiState> = {
  SET_LOADING: (state, loading) => {
    state.loading = loading; // Vue3 Proxy 支持直接赋值保持响应式
  },
};

批量更新多属性（如果需要）

如果后续需要同时更新多个state属性，再使用Object.assign，但要确保传入的是对象：

// Mutation
SET_UI_STATE: (state, payload) => {
  Object.assign(state, payload);
}

// 调用时传入对象
store.commit('SET_UI_STATE', { loading: true, otherProp: 'value' });

新增未声明的state属性（特殊场景）

如果需要给state添加预先没定义的新属性，要用Vuex4提供的set方法（替代原Vue2的Vue.set）：

import { set } from 'vuex';

export const mutations: MutationTree<UiState> = {
  SET_NEW_PROPERTY: (state, value) => {
    set(state, 'newProp', value);
  },
};

修改后测试验证 #

你的测试代码无需改动，只要Mutation正确，expect(state.loading).toBe(loading)就能通过。

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