【Vuex】dispatch和commit来调用mutations的区别

Action

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。

dispatch 推送一个action

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
commit 推送一个mutation
main.js中

import Vuex from 'vuex'

Vue.use(vuex);

const store = new Vuex.store({

  state: {

    nickName: "",

    cartCount: 0  

  },

  mutations: {

    updateUserInfo(state,nickName) {

      state.nickName = nickName;

    },

    updateCartCount(state,cartCount) {

      state.cartCount += cartCount;

    }

  },

    actions: {
        updateUserInfo(context) {
            context.commit("updateUserInfo");
        },
        updateCartCount(context) {
            context.commit("updateCartCount");
        }
    }
})

new Vue({

  el: "#app",

  store,

  router,

  template: '<App/>',

  components: {App}

})

组件中:

methods: {
            increment(){
                this.$store.dispatch("updateUserInfo", 'nick');  //this.$store.commit("increment", 'nick');
            },
            decrement() {
                this.$store.dispatch("updateCartCount", 1);  // this.$store.commit("decrement", 1);
            }
        }
 
 mutations: {
    updateUserInfo(state, payload) {
      state.userId = payload.userId;
      state.avatar = payload.avatar;
    },
    updateEnergy(state, payload) {
      state.energy = payload;
    }
  },
  actions: {
    async pageBeforeRender({ dispatch }) {
      // 当页面渲染前,会调用该接口查询数据
      return await dispatch('requestUserInfo');
    },
    async requestUserInfo({ commit }) {
      try {
        const payload = await ap.getUserInfo();
        commit('updateUserInfo', payload);
      } catch (ex) {
        ap.showToast({
          content: '请求失败',
          type: 'fail'
        });
      }
    }

区别:

dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘mutations方法名’,值)

commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)

    原文作者:梵鹿
    原文地址: https://segmentfault.com/a/1190000015254514
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞