vue报错：Error: [vuex] Do not mutate vuex store state outside mutation handlers.

vue报错：Error: [vuex] Do not mutate vuex store state outside mutation handlers.

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

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

这是因为，在Vuex中，state是唯一的数据源，是一个响应式对象，当state的值改变时，会自动刷新关联的组件，从而实现数据的实时变化。如果我们直接修改state的值，那么这个响应式机制将失效，界面也无法更新

要避免这个错误，需要遵循以下两个规则

1、只能在mutation函数中修改state的值

• mutation函数是专门用来处理state数据的方法，它是Vuex的核心部分。我们在应用中修改state的值时，应该通过mutation来修改，而不是直接修改
• 示例代码

// mutation函数用来修改state中的count值
const mutations = {
  addCount(state, num) {
    state.count += num;
  }
}

// 调用方法，修改state中的count值
this.$store.commit('addCount','8')
1
2
3
4
5
6
7
8
9

2、如果出现这样的错误，我们可以使用action函数来从异步操作中提交mutation。示例代码：

• 示例代码

// mutation函数
const mutations = {
  // 增加count值
  addCount(state, num) {
    state.count += num;
  }
}

// action函数，提交mutation
const actions = {
  asyncAddCount(context, num) {
    setTimeout(() => {
      context.commit('addCount', num); // 提交mutation
    }, 1000);
  }
}

// 调用方法，通过action间接调用mutation
this.$store.dispatch('asyncAddCount', 8);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果项目已经成型，不好一一按照以上方法排查，此时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外修改state值，true → 不能修改，false → 可以修改
    actions,
    getters,
    state: defaultState,
    mutations
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：开启了严格模式之后，若在mutation外修改值，也能动态渲染到页面上，只是vue会有警告提示，类似于这样