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：业务代码、异步请求。

3、限制

角色不同，二者有不同的限制。

• Mutation：必须同步执行。
• Action：可以异步，但不能直接操作State。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。