解决vue报错:Do not mutate vuex store state outside mutation handlers问题
更新时间：2024年05月30日 08:43:38 作者：小果子^_^
这篇文章主要介绍了解决vue报错:Do not mutate vuex store state outside mutation handlers问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue报错:Do not mutate vuex store state outside mutation handlers
原因
在vuex store的state外部直接修改了state的值，但是Vuex要求所有的state的修改必须在vuex中，不允许直接咋组件中修改store中的状态，除非通过mutation来进行。
解决方法
通过提交一个mutation来修改store中的状态。
首先在store中定义一个mutation来触发这个mutation。
例如
在store中定义mutation：
mutations: {
removeTab(state, tabName) {
state.mainTabs = state.mainTabs.filter(item => item.name !== tabName)
}
}
在组件中提交mutation：
let tabName = _this.$store.state.common.menuActiveName
this.$store.commit('removeTab', tabName)
这样就可以避免直接修改store中的状态而引发的错误。
通过mutation来修改store中的状态是VueX的最佳实践，可以确保状态的改变是可追踪和可控的。
在上面示例中，组件定义了一个removeTab方法，该方法通过this.$store.commit('removeTab', tabName)来提交名为'removeTab'的mutation，并传递了要删除的tab的名称tabName。
这样就能够在vuex store中正确地修改mainTabs的状态，而不会触发"Do not mutate vuex store state outside mutation handlers"错误
代码
.vue文件中的代码：
/store/index.js代码：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue.js在标签属性中插入变量参数的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue+express生成token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
这篇文章主要介绍了vue项目接口管理,所有接口都在apis文件夹中统一管理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue3使用vuex实现页面实时更新数据实例教程(setup)
在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue3封装 Message消息提示实例函数,具有一定的实用价值,需要的朋友可以参考下，希望能够给你带来帮助2021-09-09
这篇文章主要介绍了Vue3使用el-table组件实现分页、多选以及回显功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
这篇文章主要给大家介绍的是基于Vue2的移动端环境搭建，移动端大家更多想到的是响应布局，我们根据不同大小的屏幕进行适配，当然少不了我们的重头戏rem，移动端相比pc端就没什么特别的了。我会一步一步带领大家进入Vue2的世界，感兴趣的朋友下面来一起学习学习吧。2016-11-11
这篇文章主要介绍了VScode格式化ESlint方法(最全最好用方法),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了Vue实现穿梭框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
本篇文章主要介绍了vue与bootstrap实现时间选择器的示例代码，非常具有实用价值，需要的朋友可以参考下2017-08-08
最新评论