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

时间:2018-07-10 04:32:12

标签: vue.js vuex

将对象引用传递给Vue子组件时,并且我想更新对象属性之一的值(使用Vuex),最简单的方法是将对象引用和新值传递给突变。然后,该突变会简单地更新传递的对象的属性。

这合法吗?看起来有点太容易了,并且几乎可以冗余(因为我可以在组件本身中进行重新分配),但是现在可以跟踪突变了。

另一种选择是将对象标识符作为有效负载的一部分传递,并获取突变以搜索商店并检索它。如果没有的话,我也不想做这项工作。

1 个答案:

答案 0 :(得分:1)

我们认为这是魔术或恩赐,但这正是vue的工作原理(简单,清晰和直观),这要归功于Evan和团队。

如果您来自React或Angular,您可能会认为这太简单了,可能无法使其合法化。但是,请相信我,这才是酷。

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

首先,您会受到欢迎

  

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

不更新状态而不进行突变是不正确的做法,因为就反应性而言,Vuex状态与Vue组件数据相似。

  

突变遵循Vue的反应性规则   由于Vue使Vuex商店的状态具有反应性,因此当我们更改状态时,观察状态的Vue组件将自动更新。

提交突变的全部要点是,提交突变时不会让状态发生变化。

  

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

     

此_withCommit()所做的全部工作就是将标志设置为此。   true,然后执行变异代码(并向_committing返回   执行后返回false。

     

然后,Vuex商店正在监视各州的变量以及是否   注意到(又名观察者触发)变量在   _committing标志为false会引发警告。

您可以在此answer

中详细了解为什么不直接更改状态

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

  1. 带有效载荷的调度动作(可选)
  2. 动作会导致有效载荷变异
  3. 突变使用有效载荷更新对象。