变更vuex商店外部处理程序的问题

Question

我创建了一个从状态取值并返回不同值的getter。

 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

你在突变处理程序外突变了state的嵌套属性(fs.data[key]["Risk buckets"]=...)，一个选择是通过克隆对象从state中分离出来。例如

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;
  }