Vue3 Vuex Mutation错误修改多个状态项问题求助

问题根源 #

你遇到的情况本质是不同实例（如"1"和"2"）中的personMap["0001"]指向了同一个对象引用。由于JavaScript中对象是按引用传递的，修改其中一个对象的属性时，所有引用该对象的地方都会同步变化。这种情况通常是初始化tableMap时，直接复用了同一个person对象模板，没有为每个实例创建独立的对象副本导致的。

解决方案 #

1. 修复初始化逻辑，确保对象引用独立

初始化tableMap时，要为每个实例的personMap中的对象创建独立实例，避免共享引用：

// 错误写法：所有实例共享同一个person对象
const defaultPerson = { choice: null };
const initialTableMap = {
  "1": { prop1: 0, prop2: 0, personMap: { "0001": defaultPerson } },
  "2": { prop1: 0, prop2: 0, personMap: { "0001": defaultPerson } },
};

// 正确写法：通过函数创建独立对象实例
const createDefaultPerson = () => ({ choice: null });
const initialTableMap = {
  "1": { prop1: 0, prop2: 0, personMap: { "0001": createDefaultPerson() } },
  "2": { prop1: 0, prop2: 0, personMap: { "0001": createDefaultPerson() } },
};

2. 规范Mutation中的修改逻辑（同时保证响应式）

即使初始化没问题，修改嵌套对象时也要遵循Vuex的响应式规则，通过创建新对象的方式更新状态，避免直接修改原对象属性（同时彻底切断引用关联）：

Vue2 写法（使用扩展运算符或Vue.set）

updateTableMap: function (state, value) {
  const { instance, personID, choice } = value;
  
  // 获取目标实例和目标person对象
  const targetInstance = state.tableMap[instance];
  const targetPerson = targetInstance.personMap[personID];
  
  // 逐层创建新对象，替换原对象，保证响应式且不影响其他引用
  state.tableMap[instance] = {
    ...targetInstance,
    personMap: {
      ...targetInstance.personMap,
      [personID]: { ...targetPerson, choice }
    }
  };
}

或者用Vue.set确保响应式：

import Vue from 'vue';

updateTableMap: function (state, value) {
  const { instance, personID, choice } = value;
  
  // 创建新的person对象，替换原对象
  const updatedPerson = { ...state.tableMap[instance].personMap[personID], choice };
  Vue.set(state.tableMap[instance].personMap, personID, updatedPerson);
}

Vue3 写法（Proxy支持直接修改，但仍需保证引用独立）

updateTableMap: function (state, value) {
  const { instance, personID, choice } = value;
  
  // 直接修改属性即可，但前提是person对象本身是独立引用
  state.tableMap[instance].personMap[personID].choice = choice;
}

注意：Vue3中即使直接修改属性能触发响应式，但如果初始化时存在引用共享的问题，仍然会出现多个实例同步变化的情况，所以核心还是要解决初始化时的引用共享问题。

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