vue报错信息(二)之 Error: [vuex] Do not mutate vuex store state outside mutation handlers.

最新推荐文章于 2024-06-26 12:00:00 发布

追梦猪

最新推荐文章于 2024-06-26 12:00:00 发布

阅读量1.5k

点赞数 1

分类专栏： vue专栏

本文链接：https://blog.csdn.net/qq_38705449/article/details/103525584

版权

这篇博客详细解读了Vue中Vuex报错`Error: [vuex] Do not mutate vuex store state outside mutation handlers.`的原因，强调了不要在mutation函数外部修改Vuex状态的代码规范。文章提到，虽然不遵守此规范仍可以实现页面动态渲染，但可能导致参数混乱。Vuex提供了严格模式来监控此类行为，开启后会发出警告。作者在实践中遇到即使关闭严格模式仍然报错的问题，最终选择关闭strict模式来解决。

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

报错原理解读

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

该报错从文本意思理解还是很清晰的，不要在mutation函数外修改vuex中存储的值。

通常情况下，vuex挂载到vue上之后，vuex中的值可以在组件中修改

this.$store.state.count = 1

但我们不推荐这种做法，这是一种代码规范，建议不要在mutation函数外修改state的值，避免不必要的参数混乱。

至于要不要遵循这种规范，完全取决于你。vuex也很贴心的提供了严格模式，来控制是否提示不规范的store值修改

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import defaultState from './state'
import mutations from './mutations'
 
Vue.use(Vuex) // 将Vuex挂载到Vue
 
const debug = process.env.NODE_ENV !== 'production'
 
export default () => {
  return new Vuex.Store({
    strict: debug, // 严格模式，是否能在mutation外修改