变异vuex存储外部处理程序问题

Question

我创建了一个getter，它从state获取值并返回不同的值。

secondCoverageSSData: state => {
const fs = state.secondCoverageSS;
Object.keys(fs.data).forEach(key => {
fs.data[key]["Risk buckets"] = `(${fs.data[key]["Risk buckets"].right -
fs.data[key]["Risk buckets"].length}, ${
fs.data[key]["Risk buckets"].right
}]`;
});
return fs.data;
}

然而，我得到了以下错误：

Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

我不确定是什么导致了这种情况，因为我使用的是getter而不是state。

Answer 1

您正在突变处理程序外部更改状态的嵌套属性(fs.data[key]["Risk buckets"]=…(。一种选择是通过克隆对象将其从状态分离。例如

import { cloneDeep } from 'lodash'
secondCoverageSSData: state => {
const fs = cloneDeep(state.secondCoverageSS)
Object.keys(fs.data).forEach(key => {
fs.data[key]["Risk buckets"] = `(${fs.data[key]["Risk buckets"].right -
fs.data[key]["Risk buckets"].length}, ${
fs.data[key]["Risk buckets"].right
}]`;
});
return fs.data;
}