mutation action同级调用
-
mutatiion同级调用：this.commit -
action同级调用：this.dispatch
// 同步
const mutations = {
add(state, payload) {
state.countB = 10
},
plus(state, payload) {
this.commit('add')
}
}
// 异步（定时器等）
const actions = {
addCountBAction({ state, commit }, payload) {
commit('add', payload)
},
plusCountBToAAction({ state, commit, dispatch, getters, rootState, rootGetters }, payload) {
// https://vuex.vuejs.org/zh/api/#actions
setTimeout(() => {
dispatch('addCountBAction')
}, 2000);
// 或者 thiis.dispatch('addCountBAction')
}
}
mutation和action区别
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
-
Mutation：专注于修改State，理论上是修改State的唯一途径。 -
Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
-
Mutation：必须同步执行。 -
Action：可以异步，但不能直接操作State。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。