vuex 能否与不引用“状态”的通用突变一起正常工作？

Question

我正在使用带有数据树的 vuex。它是响应式的并且运行良好，因为我们有一个相应的组件树。由于结构是一棵树，因此想要改变一个深度嵌套的子对象是很常见的。实现这一点的简单方法是使用在其有效负载中接受孩子的突变：

removeLeaf(state, { child, leaf }) {
  child.children = child.children.filter((i: any) => i !== leaf);
  state = state; // silence warning
},

另一种方法是将突变更改为这样工作：

removeLeaf(state, { child_, leaf }) {
  let child = searchForChild(state, child_);
  child.children = child.children.filter((i: any) => i !== leaf);
},

我对第一种方式很满意。通过使用有效负载而不是状态参数来编写修改状态子对象的突变有什么缺点吗？

Answer 1

我认为它不会正常工作。

Vue 和 Vuex 的反应系统基于 Javascript Getter 和 Setter。

如果您在任何突变中控制台记录state，您将看到如下内容：

get 和 set 是 Vuex 状态的 getter 和 setter。

如果没有 setter，Vue 的反应系统可能无法工作。

在你的突变中尝试 console.log state 和 child。您可能会看到 child 不包含 setter。

如果 setter 不存在，Vue 不会知道你更新了 child 的状态，你很可能会遇到反应问题。