操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers

上一篇博客有提到直接改变vuex中的值会报错，现在详细记录一下这个错误，首先看一下错误

这是因为直接操作vuex中的数据没有通过mutations去更新state而报的错误，如果在一个组件中初始化数据赋值state中的数据，如下

 this.modelList = store.state.sd.frame.modelList

然后在方法中改变了modelList（如增删改），如下方法

 changeModel(model) {if (model) {model.modelChosen = !model.modelChosenif (model.modelChosen) {this.modelList.push({ name: model.name, showCode: model.showCode, width: model.width })} else {this.modelList.splice(this.modelList.findIndex((item) => item.name === model.name),1)}}

这样，就会报上述错误了，但是代码还是可以正常执行的，所以，在复制时候需要给后面加上slice()进行拷贝一下就好了，像这样

 this.modelList = store.state.sd.frame.modelList.slice()

然后通过mutations更新vuex的数据

 store.commit('sd/frame/setModelList', this.modelList)

这样错误就解决了，相信我，一定要加slice()，不加会死人的

操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers相关推荐

vue报错：Error: [vuex] Do not mutate vuex store state outside mutation handlers.
报错原理解读 Error: [vuex] Do not mutate vuex store state outside mutation handlers. 该报错从文本意思理解还是很清晰的,不要在m ...
解决this._data.$$state...“Error: [vuex] do not mutate vuex store state outside mutation handlers.“ 报错
今天遇到了这样一个报错: [Vue warn]: Error in callback for watcher "function () {return this._data.$$state; ...
[vuex] Do not mutate vuex store state outside mutation handlers.
我之前是这么使用的: this.form = this.$store.state.common.searchFormData; form是检索表单,每次进入页面从vuex中取出进行初始化,但是在搜索表 ...
Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) {this.selectPlay({list: this.songs,index}) }, ...mapActions(['selectPla ...
VUEX 报错：Do not mutate vuex store state outside mutation handlers.
利用空闲事件做音乐webapp的时候出错了,记录下问题 mutaitions action: 组件代码问题出在了 payload ,在这的 list 是一个数组,是一个引用类型,所以就有可能在 vu ...
SpringBoot向Mysql中插入数据报错：org.springframework.dao.InvalidDataAccessResourceUsageException: error perfo
SpringBoot向Mysql中插入数据报错:org.springframework.dao.InvalidDataAccessResourceUsageException: error perfo ...
解决Myeclipse下Debug出现Source not found以及sql server中导入数据报错
前言:在空间里回顾了我的2014,从生活.技术.家庭等各方面对自己进行总结剖析,也是给自己一个交代.也想在博客上专门写一篇2014年度菜鸟的技术路回忆录,但是因为各种事一再耽搁了,现在来写也就更显得不 ...
关于数据表中插入数据报错(pymysql.err.IntegrityError) (1062, “Duplicate entry ‘0112‘ for key ‘‘teacher.PRIMARY‘“)
文章目录 1.错误截图: 2.错误解决方案: 1.错误截图: 2.错误解决方案: 数据库的teacher表中已经存在了该数据.执行下面的操作会将报上面的错误. 在设置id和username属性的时候, ...
使用mongoose模块向本地mongodb数据库中插入数据报错“Operation `people.insertOne()` buffering timed out after 10000ms“
异常连接本地的mongodb数据库报错: MongooseError: Operation `people.insertOne()` buffering timed out after 10000m ...

操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers

操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers相关推荐

最新文章

热门文章