如何监听Vuex中Map类型state的新增、修改项及具体变更内容？

问题原因 #

你遇到的核心问题是：Map是引用类型，直接修改原Map内容时，它的引用地址不会改变。Vue的watch虽然开启deep: true能触发回调，但newValue和oldValue指向的是同一个Map实例——回调执行时原Map已经被修改，所以打印出的新旧值完全一致，也无法通过!==判断差异。

解决方案 #

要正确获取Map的变更内容，需要从Vuex的更新逻辑和组件的监听处理两方面调整：

1. 改造Vuex的Mutation：创建新Map替换旧Map #

不要直接修改原Map内容，而是基于旧Map创建新的Map实例后再赋值给state。这样每次更新都会改变引用地址，watch能正确拿到独立的新旧Map。

示例Mutation代码：

// Vuex模块中的mutations
mutations: {
  // 添加图表
  ADD_CHART(state, { chartId, chartInfo }) {
    // 基于旧Map创建新Map，再添加新项
    state.activeCharts = new Map(state.activeCharts).set(chartId, chartInfo);
  },
  // 删除图表
  REMOVE_CHART(state, chartId) {
    const newMap = new Map(state.activeCharts);
    newMap.delete(chartId);
    state.activeCharts = newMap;
  },
  // 更新图表信息
  UPDATE_CHART(state, { chartId, newInfo }) {
    // 若newInfo是对象，用扩展运算符创建新对象确保引用变化
    const updatedInfo = { ...newInfo };
    state.activeCharts = new Map(state.activeCharts).set(chartId, updatedInfo);
  }
}

2. 组件中监听Map并提取变更内容 #

现在watch可以去掉deep: true，直接监听Map的引用变化。再编写工具函数对比新旧Map，提取新增、删除、更新的内容：

// 组件内工具函数：对比两个Map的差异
function getMapDiff(oldMap, newMap) {
  const added = [];
  const removed = [];
  const updated = [];

  // 遍历新Map，找出新增和更新的项
  newMap.forEach((newVal, key) => {
    if (!oldMap.has(key)) {
      added.push({ chartId: key, chartInfo: newVal });
    } else {
      const oldVal = oldMap.get(key);
      // 用JSON.stringify做浅深比较，若图表信息含特殊类型（函数、Symbol），可替换为深比较函数
      if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
        updated.push({
          chartId: key,
          oldChartInfo: oldVal,
          newChartInfo: newVal
        });
      }
    }
  });

  // 遍历旧Map，找出删除的项
  oldMap.forEach((oldVal, key) => {
    if (!newMap.has(key)) {
      removed.push({ chartId: key, chartInfo: oldVal });
    }
  });

  return { added, removed, updated };
}

// 组件的watch配置
watch: {
  activeCharts(newValue, oldValue) {
    const diff = getMapDiff(oldValue, newValue);
    console.log('新增的图表：', diff.added);
    console.log('删除的图表：', diff.removed);
    console.log('更新的图表：', diff.updated);
  }
}

补充说明 #

• 如果图表信息是复杂对象，JSON.stringify的比较方式可能不准确（比如对象内有函数、循环引用），可以自己实现深比较逻辑，或者引入lodash.isEqual这类工具函数做深比较。
• 之前监听activeChartsSize能生效，是因为size是值类型，Map内容变化时size会同步更新，所以watch能捕捉到数值变化，但无法获取具体变更的图表信息。

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