改变在有效载荷中传递的 Vuex 数组

Posted 2023-02-22

【中文标题】改变在有效载荷中传递的 Vuex 数组

【英文标题】：Mutate Vuex array passed in the payload

【发布时间】：2021-05-26 01:00:39

【问题描述】：

接下来两种方法的技术区别是什么？示例很简单，但是当我有巨大的嵌套对象时，我需要传递大量 ID 才能在突变中找到所需的对象。

在第二个示例中，我传递一个数组并对其进行变异。同样，从技术上讲，在这两个示例中，我们调用了相同的 push 方法。我对吗？应该是一样的。

const state = () => (
  cards: []
);

mutations: 
  addCard(state, card) 
    state.cards.push(card)
  


// Component...

this.$store.commit('addCard', ...card);

和

const state = () => (
  cards: []
);

mutations: 
  addCard(state, data) 
    data.cards.push(data.card)
  


// Component...

this.$store.commit('addCard',  cards: this.$store.cards, card: ...card ); 

【问题讨论】：

第二块无效。突变定义不应该有 3 个参数。也许你错过了一些解构大括号。

【参考方案1】：

技术上有什么区别...？

我知道您不是在问两者之间的字面区别是什么，但我会先说清楚。

在第一个 sn-p 中，您将传递一个新项目并将其添加到您通过突变的 state 参数访问的数组状态。 在第二个 sn-p 中，您同时传递数组状态和项，并改为通过有效负载访问数组。

再次，从技术上讲，在这两个示例中，我们调用了相同的推送方法。我说的对吗？

是的，这两个实现了完全相同的结果。数组状态，无论是通过突变参数还是通过有效负载访问，都是完全相同的对象（即===）。

第二个 sn-p 中的模式在改变深度嵌套状态时非常有用，就像你发现的那样。缺点是，对于以后尝试学习您的代码的人来说，可能不太清楚发生了什么变异。

【讨论】：

谢谢！第二个答案是我一直在寻找的。关于缺点的好点，但我发现它对于深度嵌套状态非常有用。

不客气。是的，它很有用。而对于一个小型的个人项目，应该没问题。对于大型团队协作，这对于研究商店代码的团队成员来说可能是个问题。他们会偶然发现这种突变并且不知道它的真正作用。但是，如果它足够有用，一些好的文档可能会消除这种担忧。