Vuex中action提交mutations后，state改变不正常。

问题描述

问 题

1，描述：state里有两个值，一个是List1，一个是List2。分别是两个空数组。项目加载时，会dispatch一个action去获取数据，放入这两个List中，List2的设计初衷是作为List1的备份。action又提交mutations去存数据（同一个action触发两个mutations，List1和List2是不同mutations存的。）。
2，问题：初始化完毕之后，两个List里数据都正常。这时触发一个action去改变List1的值，改变过程是：（1）用一个变量先获取List1（state.List1），（2）然后改变这个变量，（3）再通过提交mutations（和初始化那个相同，也试过另外写一个。）去改变List1.这时问题产生了：List2会跟着变。两个最终是一摸一样的。
3，说明：初始化时，是由1个action（axios获取数据的）提交两个不同mutations存的。而且List2只有通过唯一的一个mutations去改变。
4，我再去检查一下代码，稍后来贴上代码，求解！
5，部分代码的说明：主要是想实现一个过滤功能，如果关键字存在，则进行过滤，不存在则返回所有的数据（即备份的数据。）。注：数据的结构比较复杂。
代码截图：
state:

actions:
修改List1（即productList）的actions：

获取数据的actions：

赋值的mutations：

解决方案

大概看了下，出现两个数组或对象共同改变的情况，大多是因为两个数组的地址指向的同一个。具体可以了解下面向对象内存储存的问题。

你这里的问题就是这样，List1 与 List2都是赋值操作，所以List1 === List2是完全相等的。可以修改BACKUPPL方法state.saveMyList = Object.assign([], info)。将info进行一次深拷贝即可。

Object.assign是在es6中新加入的深拷贝函数。

这篇关于Vuex中action提交mutations后，state改变不正常。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！