Javascript Immer数据未在Vue中更新

我正在尝试将Immer与Vue一起使用。状态似乎正在更新，但Vue没有更新UI

//immutable.js
从“immer”导入产品，{applyPatches}
让我们撤销缓冲区=[]
导出变量状态={items:[]}
常量句柄\u添加\u面片=（面片，逆面片）=>{
日志（“反向补丁：”，反向补丁）
撤消缓冲区推送（反向补片）
}
导出常量添加项目=（项目名称）=>{
log（“启动添加项调用”）
const next_state=生产(
国家,，
草稿=>{
draft.items.push（{name:item_name}）
},
句柄\u添加\u补丁
)
log（“下一个状态：”，下一个状态）
状态=下一个状态
}
导出常量撤消=（）=>{
const undo_patch=undo_buffer.pop（）
如果（！undo_patch）返回
让新的补丁状态=applyPatches（状态，撤消补丁）
日志（“新状态：”，新状态）
状态=新状态
}

添加项
{{items}}
撤消
从“./immutable.js”导入*为不可变
导出默认值{
计算：{
items:function（）{return immutable.state.items}
},
方法：{
添加_项（）{
log（“之前的状态：”，不可变的.State）
不可变。添加_项（“Hello”）
log（“之后的状态：”，不可变的.State）
},
撤消（）{
log（“之前的状态：”，不可变的.State）
不可变的
log（“之后的状态：”，不可变的.State）
}
}
}

---

console.log显示项目数组正在更改，但Vue模板中的项目只显示一个空数组。如何使其在Vue中可见？

计算属性将被缓存，并且在相关组件数据更改之前不会重新计算这些属性。由于Immer对象不是组件的一部分，因此不会发生重新计算

使用getter方法而不是computed属性可以防止缓存：

{{ getItems() }}

...

methods: {
  getItems: () => immutable.state.items
  addItem() {
    immutable.add_item("Hello");
    this.$forceUpdate();
  }
}

更直接的方法是强制重新计算属性：

data() {
  return { _itemsDirtyFlag: 0 }
},
computed: {
  items: {
    get() {
      this._itemsDirtyFlag; // associate it with this computed property
      return immutable.state.items;
    }
},
methods: {
  updateItems() {
    this._itemsDirtyFlag++;
  },
  addItem() {
    immutable.add_item("Hello");
    this.updateItems();
  }
}

---

使用

Vue.util.defineReactive

internal的类似方法由使用。

此问题与Immer无关。vuejs缓存计算的属性，因此在数据更新时它们不会更新。vuejs文档中明确提到了这一点

我们可以将同一函数定义为 方法。就最终结果而言，这两种方法确实是相同的 一样。但是，不同之处在于计算属性是缓存的 基于它们的反应依赖关系。计算属性只有在其某些反应依赖项发生更改时才会重新计算

由于Immer不是一个被动依赖项，因此computed属性不会再次运行

---

解决方法是将computed属性更改为方法。这样它就不会被缓存，并且每次都会使用更新的值运行该方法。

我想是您的计算结果造成的。尝试更改

items（）{return immutable.state.items}

这个问题可以通过提供一个简化的repo沙盒来改进，因为它非常特定于特定的用例。这似乎是相关的。