Error: [vuex] do not mutate vuex store state outside mutation handlers

1. 问题解析

通常出现这种错误是因为 在 mutation 函数外修改了 state 里面的值，如：

我这里的参数data是一个对象， 对象为引用类型， 像这样直接赋值只是把地址赋值到当前变量上， 地址指向的值还是同一个对象。 所以在其他地方修改参数data的时候相当于是在修改state里面的selectedSpec， 然后就会报错了。数组同理。

2. 解决方法
可以通过值拷贝的方式把参数data拷贝一份再赋值给state里面的变量，如果只是简单引用类型的值，可以通过浅拷贝的方式

数组也可以使用assign解决state.selectedSpec = Object.assign([], data);

如果是复杂对象，也就是对象内嵌套对象， 浅拷贝就不能用了， 因为嵌套的子对象属性还是一个引用地址， 所以就用到深拷贝的方法来解决。

export function deepClone(source) {
  if (!source || typeof source !== 'object') {
    throw new Error('error arguments', 'shallowClone');
  }
  var targetObj = source.constructor === Array ? [] : {};
  for (var keys in source) {
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      } else {
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

学习参考：
https://www.cnblogs.com/lan1974/p/9111259.html