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

Question

接下来两种方法的技术区别是什么？示例很简单，但是当我有巨大的嵌套对象时，我需要传递大量 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} }); 

Answer 1

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

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

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

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

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

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