Vuejs -为数组中的每个项目添加属性

Question

这几天我的头撞到了各种各样的墙上，希望能得到一些帮助。

我得到以下错误，但不能真正看到我所做的与vuex有什么关系:[vuex] do not mutate vuex store state outside mutation handlers.

在我的vue组件中，我为从外部API获得的未来数据定义了一个空数组。

data() {
return {
costCentres: [],
};
},

我有一个手表在我的vuex存储对象命名为schedule(我已经使用MapState带来…并尝试使用一个getter使用MapGetter看看是否有任何不同)。在本文中，我创建了我的数组costCentres，其中每个元素由来自API的大约5个属性组成。我在这里添加了两个属性(章节和任务)，我打算稍后填充它们，并且我需要响应，所以我按照Vue响应性文档这样做，我发现所有其他问题都像我的问题一样远程引用。

watch: {
schedule() {
if (this.schedule.rows) {
this.costCentres = this.schedule.rows.filter((row) => {
return row.cells[
this.schedule.columnKeysByName["Cost Code"]
].value; // returns row if Cost Code value exists
});
this.costCentres.forEach((costCentre) => {
this.$set(costCentre, 'section', null);
this.$set(costCentre, 'task', null);
});
}
},

this.$set行对数组中的每个元素抛出前面提到的错误。

当我稍后更新属性时，更改是反应性的，所以只是大量的错误消息让我感到沮丧。显然，如果我不使用set，那么我就不会得到反应性。

我不知道我所做的是如何与vuex存储相关的，因为costCentre是一个普通的旧数据属性。

我已经尝试了数百种变化来获得这一切的工作(包括this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })似乎不工作)，我已经用完的选项，所以任何帮助将非常感激!

(也请让我知道如果我需要显示更多的代码-我试图保持简洁!)

Answer 1

1. this.schedule.rows是一个包含一些对象的数组(从Vuex映射)，所以数组和对象在"belongs"Vuex)
2. 您正在通过filter创建this.costCentres-因此最终this.costCentres只是另一个数组包含对象的子集从this.schedule.rows(元素内部只是指针的对象Vuex)
3. 在forEach循环中，你正在修改的对象是Vuex存储的一部分，结果得到错误[vuex] do not mutate vuex store state outside mutation handlers.

如果您想修改这些对象，唯一的方法是使用Vuex mutations

另一种解决方案是复制对象(创建具有相同值的新对象):

this.costCentres = this.schedule.rows.filter((row) => {
return row.cells[this.schedule.columnKeysByName["Cost Code"]].value;
})
.map((row) => ({...row, section: null, task: null }))

注意:上面的代码只创建了一个浅拷贝，所以如果你的对象确实包含一些深嵌套的属性，你必须使用其他方法来克隆它们

现在this.costCentres中的对象不是Vuex的一部分，可以自由修改而不使用突变…