vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > mutation action同级调用

vuex mutation action同级调用方式

作者:zhooson

这篇文章主要介绍了vuex mutation action同级调用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

mutation action同级调用

// 同步
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、角色定位

基于流程顺序,二者扮演不同的角色。

3、限制

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

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

您可能感兴趣的文章:
阅读全文