【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方法名',值)