突变 vuex 存储外部处理程序问题答案

【问题标题】：Mutating vuex store outside handlers issue突变 vuex 存储外部处理程序问题
【发布时间】：2020-05-01 07:39:14
【问题描述】：

我创建了一个 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 not state。

【问题讨论】：

可能会发生，因为状态的数据可能会被操纵。您能否尝试先在 getter 中创建状态数据（扩展运算符）的副本，然后进行更改。

标签： vue.js vuejs2 vuex

【解决方案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;
  }

【讨论】：