vue报错:Error: [vuex] Do not mutate vuex store state outside mutation handlers.
Error: [vuex] Do not mutate vuex store state outside mutation handlers.
该报错从文本意思理解还是很清晰的,不要在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')
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);
如果项目已经成型,不好一一按照以上方法排查,此时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
})
}
注意:开启了严格模式之后,若在mutation外修改值,也能动态渲染到页面上,只是vue会有警告提示,类似于这样