解决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代码：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Blob 对象表示一个不可变、原始数据的类文件对象，这篇文章主要介绍了vue使用blob下载文件遇到的问题记录,需要的朋友可以参考下2024-02-02
使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的props数据2025-08-08
在vue中最常用的应该就是axios了，这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述，提前安装一下也不用我说了吧2021-06-06
这篇文章主要介绍了Jeeplus-vue 实现文件的上传，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
vue对storejs获取的数据进行处理时遇到的几种问题小结
这篇文章主要介绍了vue对storejs获取的数据进行处理时遇到的几种问题小结,需要的朋友可以参考下2018-03-03
在vue工程中,除开vue自带的什么父子间,祖孙间通信,还有一个非常方便的通信方式,类似Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js,可以实现各个组件间的通信,所以本文给大家介绍了vue3使用mitt.js实现组件通信,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了Vue 防止短时间内连续点击后多次触发请求的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue动态绑定组件子父组件多表单验证功能的实现代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要介绍了Vue前端整合Element Ui,本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
最新评论