vuex mutation action同级调用方式是什么

本篇内容介绍了“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。

“vuex mutation action同级调用方式是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！