Vuex状态地图值更改不会传播

Question

我有一个包含地图的Vuex商店

export const store = new Vuex.Store({
state:
{
   foo: new Map()
   ...
}

和一个吸气剂

getFooDataById: (state) => (id) =>
{
  return state.foo.get(id).data;
}

以及组件

中的最后但并非最不重要的computed函数

computed: 
{
  getData()
  {
    return this.$store.getters.getFooDataById(this.id);
  }
}

这最初效果很好，但突变对状态图（特别是地图值对象）所做的任何更改都不会传播到组件。
我是否在某处犯了错误，或者是否无法将地图用作vuex状态对象？有没有办法手动传播更改？

编辑以质疑待审核重复标记

虽然Vue仍然没有对设置到地图中的新项目作出反应，但是 我相信引用的重复问题是一个有点不同的情况。

这个问题涉及Vuex，因此可以通过用突变中的克隆替换Map in状态来强制反应。

mutations: {
  'ADD_TO_MAP' (state, [key, value]) {
    state.foo = new Map(state.foo)
    state.foo.set(key, value);
  },
}

示例CodePen

我正在考虑是否存在任何不利因素，但似乎没问题 无论如何，应该允许答案探索各种选择。