使用 Vuex 突变更新对象引用的正确方法是什么？

Question

当一个对象引用被传递给一个 Vue 子组件，并且我想更新对象的属性之一的值（使用 Vuex）时，最简单的方法是将对象引用和新值传递给突变。然后，突变只是简单地更新传递对象的属性。

这是合法的吗？这似乎有点太容易了，而且几乎是多余的（因为我可以在组件本身中进行重新分配），除了现在可以跟踪突变。

另一种方法是将对象标识符作为有效负载的一部分传递，并获取突变以搜索存储并检索它。如果我没有，我不喜欢做这项工作。

Answer 1

好吧，认为它是一种魔法或一种恩惠，但这就是 vue 的工作方式（简单、清晰和直观）感谢 Evan 和团队。

如果您来自 React 或 Angular，您可能会认为这太简单了，并且可能不相信它的合法性。但相信我，这就是 vue 的酷炫程度。

让我解释一下为什么你不能直接改变突变

首先你会看到这个

错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。 在断言

在没有突变的情况下更新状态是一种不好的做法，因为 Vuex 状态在反应性方面类似于 Vue 组件数据。

变异遵循 Vue 的反应规则 由于 Vuex store 的状态是由 Vue 进行响应式的，所以当我们改变状态时，观察状态的 Vue 组件会自动更新。

提交突变的全部意义在于，当您提交它时，它不会让状态发生变化。

在 Store.commit() 的代码中，它通过 _withCommit() 内部函数执行变异代码。

这个 _withCommit() 所做的只是设置一个标志 this._committing 到 true 然后执行突变代码（并返回 _committing 到 执行后为假）。

Vuex 商店会观察状态的变量，如果它 通知（又名观察者触发器）变量在 _committing 标志为 false，它会引发警告。

您可以在answer 中阅读更多关于为什么不直接更改状态的信息

那么更新对象的最佳方法是什么。

1. 带负载的调度操作（可选）
2. Action 使用有效负载提交突变
3. 突变使用有效负载更新对象。