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

最新推荐文章于 2024-06-26 12:00:00 发布

Kotoba209_

最新推荐文章于 2024-06-26 12:00:00 发布

阅读量2.4k

点赞数

分类专栏： vue js

本文链接：https://blog.csdn.net/Kotoba209_/article/details/106426628

版权

vue 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

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