vuex是否可以与不引用“ state”的通用突变一起正常工作？

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 class helper和Getter。

如果您以任何突变方式console.log state，您将看到类似以下内容：

Setter

get和set是您的Vuex状态的获取者和设定者。

没有设置者，Vue的反应系统可能无法正常工作。

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

如果安装者不在，Vue将不会知道您已更新child的状态，并且您可能会出现反应性问题。