vuex使用前と使用後の表記---action(イベントをトリガーしてこのイベントを変更した場合--ステータスを変更)

Actionは、ステータスを直接変更するのではなく、mutationをコミットします.

アクションは、任意の非同期動作を含むことができる.

Action関数はstoreインスタンスと同じメソッドとプロパティを持つcontextオブジェクトを受け入れるため、呼び出すことができます.  context.commit  mutationをコミットするか、  context.state  和  context.getters  をクリックしてstateとgettersを取得します.
 アクションによる非同期操作、およびパラメータの転送
アクションの配布
アクションパス  store.dispatch  メソッドのトリガー:

store.dispatch('increment')

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

アクションの具体的な使い方:
実装コンポーネントproductListOneでは、3秒後にbuttonボタンをクリックして値下げを実現します.

// store.js 
mutations:{
        reducePrice: (state) => {
            setTimeout(function () { 
                state.products.forEach(product => {
                    product.price -= 1;
                    });
             },3000)
            
          } 
    }  

//       ，      ，         ，             ，      ，        ，          ，        。

したがって、mutationsの関数が非同期操作を実現するには、actionを使用する必要があります.非同期実行が必要な関数は、actionsの中にあります.

// store.js

 mutations:{
        reducePrice: (state) => {
            // setTimeout(function () { 
                state.products.forEach(product => {
                    product.price -= 1;
                });
            //  },3000)
          } 
    },
    actions:{
        reducePrice:(context) => {
            setTimeout(function () { 
               context.commit("reducePrice"); //    context   store
            },3000)
        }
    }

// productListOne.vue 

 methods: {
    reducePrice: function(){
      // this.$store.state.products.forEach(product => {
      //   product.price -= 1;
      // });
      // this.$store.commit('reducePrice')
      this.$store.dispatch("reducePrice")  //    action    ，     dispatch
    }
  }

また、このような書き方は、クリック商品の値下げを実現し、クリックごとに4元値下げし、商品の値下げを実現し、パラメータはreducePrice:function{}のamountが受信し、this.$store.dispatch(「reducePrice」、amount)を通じてstore.jsに伝達する.store.jsのactionはreducePrice:(context,payload)=>{}のpayloadで受信されます.同時にmutationでもpayloadを受信する必要があり、 reducePrice: (state,payload) => {}
次のコードがあります.

// productListOne.vue 





    methods: {
    reducePrice: function(amount){ // amount  
      // this.$store.state.products.forEach(product => {
      //   product.price -= 1;
      // });
      // this.$store.commit('reducePrice')
      this.$store.dispatch("reducePrice",amount)  // store.js   payload  amount
    }
  }

// store.js

 mutations:{
        reducePrice: (state,payload) => { //   payload
            // setTimeout(function () { 
                state.products.forEach(product => {
                    // product.price -=1; 
                    product.price -= payload; 
                });
            //  },3000)
          } 
    },
    actions:{
        reducePrice:(context,payload) => {
            setTimeout(function () { 
               context.commit("reducePrice",payload); // payload  dispatch    amount，   mutation
            },3000)
        }
    }  

 
以上がactionによるmutations内の関数およびパラメータの非同期操作である.