vuex mutation action同级调用方式
作者:zhooson
这篇文章主要介绍了vuex mutation action同级调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。