vuex mutation action同级调用方式
目录
mutation action同级调用
mutation和action区别
1、流程顺序
2、角色定位
3、限制
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：业务代码、异步请求。
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
