解决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代码：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
vue3中defineProps传值使用ref响应式失效详解
这篇文章主要给大家介绍了关于vue3中defineProps传值使用ref响应式失效的相关资料,文章通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
文章介绍了如何使用Vue实现列表滑动下拉加载数据的功能,通过监听滚动事件,检测用户是否滚动到底部,然后动态加载更多数据,附带了实现思路和案例代码,感兴趣的朋友一起看看吧2024-11-11
vue-cli中的babel配置文件.babelrc实例详解
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。本文介绍vue-cli脚手架工具根目录的babelrc配置文件，感兴趣的朋友一起看看吧2018-02-02
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化,这篇文章主要给大家介绍了关于vue3.0中watch侦听器的相关资料,需要的朋友可以参考下2021-10-10
基于el-table和el-pagination实现数据的分页效果
本文主要介绍了基于el-table和el-pagination实现数据的分页效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
在开始学习vue的时候,对于新手安装这个环境是真的搞人心态,不友好,下面这篇文章主要给大家介绍了关于Vue安装与环境配置的相关资料,需要的朋友可以参考下2022-07-07
Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符问题
Vue项目在谷歌浏览器中正常运行,但在IE浏览器中出现问题,如白屏和控制台报错,解决过程包括检查IE设置、调整编辑器配置、引入兼容性插件、使用productionSourceMap定位错误、检查插件依赖和版本,以及重新构建项目2024-09-09
本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了如何在Vue项目中使用vue-json-excel插件实现Excel表格的导出功能,包括安装依赖、引入插件、使用组件、设置表头和数据、处理空数据情况、源代码修改以解决常见问题,需要的朋友可以参考下2025-01-01
如何在Vue中实现Svelte的Defer Transition
这篇文章主要介绍了如何在Vue中实现Svelte的Defer Transition，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
最新评论