[vuex] Do not mutate vuex store state outside mutation handlers.

我之前是这么使用的：

this.form = this.$store.state.common.searchFormData;

form是检索表单，每次进入页面从vuex中取出进行初始化，但是在搜索表单中进行修改时，控制台报错,即[vuex] Do not mutate vuex store state outside mutation handlers.

报错原因：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，这是官网原话。意思是state中的值必须在回调函中更改，而我们上边的赋值其实是深度赋值，表单中的值改变会触发vuex中state的值变化，所以才会报此错误。

解决方案：

1、传入的参数进行处理,即使用

this.form=Object.assign({},this.$store.state.common.searchFormData);

进行对象的浅拷贝，这样就不会触发vuex中state的值。

2、报以上错误是因为开启了严格模式、即strict：true了，所以你可以把这个关闭false即可。

注意：生产环境中必须设置strict：false

strict

strict

[vuex] Do not mutate vuex store state outside mutation handlers.相关推荐

Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) {this.selectPlay({list: this.songs,index}) }, ...mapActions(['selectPla ...
解决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; ...
vue报错：Error: [vuex] Do not mutate vuex store state outside mutation handlers.
报错原理解读 Error: [vuex] Do not mutate vuex store state outside mutation handlers. 该报错从文本意思理解还是很清晰的,不要在m ...
操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers
上一篇博客有提到直接改变vuex中的值会报错,现在详细记录一下这个错误,首先看一下错误这是因为直接操作vuex中的数据没有通过mutations去更新state而报的错误,如果在一个组件中初始化数据 ...
VUEX 报错：Do not mutate vuex store state outside mutation handlers.
利用空闲事件做音乐webapp的时候出错了,记录下问题 mutaitions action: 组件代码问题出在了 payload ,在这的 list 是一个数组,是一个引用类型,所以就有可能在 vu ...
vuex使用模块的时候获取state里的数据语法
普通语法 this.$store.state.[哪个数据] 模块化语法: this.$store.state.[哪个模块].[哪个数据] <template> <div class= ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
vuex第三弹vuex之actions(前端网备份)
index.js 首先在store里面有两种写法乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action ...
vuex的基本应用(vuex的购物车案例)
vuex的基本应用概念 vuex是一个专门为vue应用程序开发的状态管理模式,"vuex采用集中式存储,管理vue应用的所有组件的状态,并以相应的规则保证状态以一种可以预测的方式发生变 ...

[vuex] Do not mutate vuex store state outside mutation handlers.

[vuex] Do not mutate vuex store state outside mutation handlers.相关推荐

最新文章

热门文章