Vuex中突变数组的棘手问题，如何解决？

Question

我有一些异步操作，从服务器获取数据（对象数组）并使用这些数据提交突变。然后，在我的突变中，我将数据推送到存储。 我的第一次尝试是 ES6-ish：

state.data = [...state.data, ...payload];

使用控制台对状态进行故障排除我看到新状态有 205 个元素，应该是这样的。但是，如果我直接从 Vuex devtools 检查状态 - 长度为 0。

好的，可能是解构或其他问题。

state.data = payload;

也不行。所以，我的第三次尝试是有史以来最愚蠢的：

payload.forEach(x => x.state.data.push(x));

而且……它奏效了。但是，这需要时间，就像很多一样（只有 205 个元素，Carl！） 所以，我的问题 -> Vue/Vuex 有什么问题？

Answer 1

您可以使用Vue.set() 函数。

在您的变异方法中执行以下操作：

Vue.set(state, 'data', payload);

Documentation