vue报错：Do not mutate vuex store state outside mutation handlers.

小果子^_^

于 2024-04-25 17:53:04 发布

阅读量832

点赞数 3

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_44021888/article/details/138195827

版权

Vue 专栏收录该内容

61 篇文章 5 订阅

订阅专栏

本文讲述了在Vue应用中，如何避免因在Vuexstore的state外部直接修改而导致的错误，强调了Vuex中mutation处理状态变更的重要性，以及提供了一个移除tab的示例代码，展示了如何通过commitmutation来安全地更新store状态。

摘要由CSDN通过智能技术生成

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代码：