vuex中のmutation/actionの伝え方を詳しく説明します。

前言
vuexでmutationを提出することは状態を変更する唯一の方法であり、このプロセスは同期であり、非同期論理はactionにカプセル化されるべきである。mutation/actionには、一般的な操作があります。つまり、公式サイトでいう「提出荷重」です。
ここですは、どのようにvue-cliでvuexを使用するかについての方法であり、vuex設定を異なるモジュールに分割する方法を採用する。ここで、stateモジュールには以下のように配置されています。

//vuex  state
const state = {
  count: 0
}

export default state;

mutation传参
飾り気のないやり方
muttions.js

//vuex  mutation
const mutations = {
  increment: (state,n) => {
    //n          
    state.count += n;
  }
}

export default mutations;

vueコンポーネント中（他のコードは省略）

methods: {
  add(){
    //  
    this.$store.commit('increment',5);
  }
}

オブジェクトスタイル提出パラメータ
muttions.js

//vuex  mutation
const mutations = {
  decrementa: (state,payload) => {
    state.count -= payload.amount;
  }
}

export default mutations;

vueコンポーネント

methods: {
  reducea(){
    //      
    this.$store.commit({
      type: 'decrementa',
      amount: 5
    });
  },
}

action参照
質朴簡素
action.js

/vuex  action
const actions = {
  increment(context,args){
    context.commit('increment',args);
  }
}

export default actions;

muttions.js

//vuex  mutation
const mutations = {
  increment: (state,n) => {
    state.count += n;
  }
}

export default mutations;

vueコンポーネント

methods: {
  adda(){
    //  action
    this.$store.dispatch('increment',5);
  }
}

オブジェクトスタイル
action.js

//vuex  action
const actions = {
  decrementa(context,payload){
    context.commit('decrementa',payload);
  }
}

export default actions;

muttions.js

//vuex  mutation
const mutations = {
  decrementa: (state,payload) => {
    state.count -= payload.amount;
  }
}

export default mutations;

vueコンポーネント

methods: {
  reduceb(){
    this.$store.dispatch({
      type: 'decrementa',
      amount: 5
    });
  }
}

actionの非同期操作
急にactionの非同期操作をまとめたいです。。。。
プロに戻る
action.js

//vuex  action
const actions = {
  asyncMul(context,payload){
    //  promise    store.dispatch
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('multiplication',payload);
        resolve("async over");
      },2000);
    });
  }
}

export default actions;

muttions.js

//vuex  mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vueコンポーネント

methods: {
  asyncMul(){
    let amount = {
      type: 'asyncMul',
      amount: 5
    }
    this.$store.dispatch(amount).then((result) => {
      console.log(result);
    });
  }
}

もう一つのactionでactionを組み合わせる
action.js

//vuex  action
const actions = {
  asyncMul(context,payload){
    //  promise    store.dispatch
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('multiplication',payload);
        resolve("async over");
      },2000);
    });
  },
  actiona({dispatch,commit},payload){
    return dispatch('asyncMul',payload).then(() => {
      commit('multiplication',payload);
      return "async over";
    })
  }
}

export default actions;

muttions.js

//vuex  mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vueコンポーネント

methods: {
  actiona(){
    let amount = {
      type: 'actiona',
      amount: 5
    }
    this.$store.dispatch(amount).then((result) => {
      console.log(result);
    });
  }
}

async関数を使う
action.js

//vuex  action
const actions = {
  asyncMul(context,payload){
    //  promise    store.dispatch
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit('multiplication',payload);
        resolve("async over");
      },2000);
    });
  },
  async actionb({dispatch,commit},payload){
    await dispatch('asyncMul',payload);
    commit('multiplication',payload);
  }
}

export default actions;

muttions.js

//vuex  mutation
const mutations = {
  multiplication(state,payload){
    state.count *= payload.amount;
  }
}

export default mutations;

vueコンポーネント

methods: {
  actionb(){
    let amount = {
      type: 'actionb',
      amount: 5
    }
    this.$store.dispatch(amount).then(() => {
      ...
    });
  }
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。