我要评论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代码：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论