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

调用action，action调用mutation修改state的值，

let abc = store.state.xxx
abc.def = false
store.dispatch('setModalHidden')

报错：

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

原因

vue文件中有从state内获取的数据直接赋值（浅拷贝），并且有直接修改

这一步是报错的原因，跟store.dispatch('setModalHidden')没有关系
abc.def = false

解决（深拷贝）

let abc = JSON.parse(JSON.stringify(store.state.xxx))

=>深浅拷贝
实在不是在mutation外赋值却报了这个错的话，

还有一种一劳永逸但是不太安全的办法
在返回store的时候，添加参数 strict: false, （仅在确认没有在mutation外操作值的情况建议使用）

export default {strict: false, // 严格模式，是否能在mutation外修改state值，true → 不能修改，false → 可以修改actions,getters,state,mutations
}

参考文章

Error: [vuex] do not mutate vuex store state outside mutation handlers.相关推荐

解决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 ...
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.
我之前是这么使用的: this.form = this.$store.state.common.searchFormData; form是检索表单,每次进入页面从vuex中取出进行初始化,但是在搜索表 ...
操作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 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...
vuex使用模块的时候获取state里的数据语法
普通语法 this.$store.state.[哪个数据] 模块化语法: this.$store.state.[哪个模块].[哪个数据] <template> <div class= ...
vuex第三弹vuex之actions(前端网备份)
index.js 首先在store里面有两种写法乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action ...
vuex的基本应用(vuex的购物车案例)
vuex的基本应用概念 vuex是一个专门为vue应用程序开发的状态管理模式,"vuex采用集中式存储,管理vue应用的所有组件的状态,并以相应的规则保证状态以一种可以预测的方式发生变 ...

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

Error: [vuex] do not mutate vuex store state outside mutation handlers.相关推荐

最新文章

热门文章