vuex actions非同期修正状態の実例詳細

actions非同期修正状態とmuttions同期修正状態は二つの混淆しやすい概念です。両者は実行上の違いをテストするのが難しいです。二つを区別したいです。まず同期と非同期を区別しなければなりません。同期は流れ作業のようです。非同期はもっと多くの種類に似ています。例えば電話をかけます。私たちは普通お母さんに電話してから、またお父さんと電話します。お父さんの後ろで話してもいいし、お父さんも前で話してもいいです。
actionsとmuttionsの違いはここにあります。muttionsはBaiduの財布で商品を買う時、まず買い物の流れを全部歩いてから他の商品を買うことができます。actionsは同じように準備して決済する時に他の商品を選んで、他の商品を決済してから商品の決済をすることもできます。
具体的にactionsの書き方を紹介します。
第一歩はあなたがvuexを確立するstore.jsでactions方法を宣言します。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//    
 
count1:1,
 
 
 
},
const mutations={//    
 jia(state,n){
    state.count1+=n;
  },
 jian(state){
    state.count1--;
  },
 
},
const actions={
jiaAction(context){
 
context.commit('jia',10)
/*      ，   store        jia()*/
 
},
jianAction({commit}){
 
 
commit('jian')/*      ，   store        jian()*/
}
 
 
}
 
 
export default new Vuex.Store({
 
 
 
state,
mutations,
getters,
actions/*  state,mutations        */
})

二番目のステップはあなたのテンプレート（例えばa.vue）にactions方法を導入する必要があります。
1）importがmapActionsに導入される

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

2）あなたの方法の中に…mapActionsを導入します。
フォーマットは普通はすべて固定してそのまま書き写せばいいです。
コードは以下の通りです

<template>
<div>
 
<div>
 
{{count1}}
 
</div>
 
</div>
</template>
<script>
  import store from '@/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return{
       
      }
    },
  
 methods:{
  ...mapMutations([ 
    'jia','jian'
  ]),
  ...mapActions(['jiaAction','jianAction'])
}, 
 
   computed:{
   
   
   ...mapState(["count1"]),
 
 
   },
    
    store
    
  }
</script>
 
 
 
 
 
<style scoped>
.color{
color:red;
}
 
</style>

第三段階はあなたのコンポーネントのテンプレート(a.vue)にクリックイベントを導入します。
コードは以下の通りです

<template>
<div>
 
<div>
 
{{count1}}
 
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>

全体コードは以下の通りです

<template>
<div>
 
<div>
 
{{count1}}
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>
<script>
  import store from '@/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return{
       
      }
    },
  
 methods:{
  ...mapMutations([ 
    'jia','jian'
  ]),
  ...mapActions(['jiaAction','jianAction'])
}, 
 
   computed:{
   
   
   ...mapState(["count1"]),
 
 
   },
    
    store
    
  }
</script>

注：今はあなたの＋または-のボタンをクリックして、その値を確認してください。

<button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>

に換える

<button @click="jia">+</button>
 <button @click="jian">-</button>

何の違いがありますか？
あなたのデバッグコードが成功しました。
ステップ4で非同期検証を行う
私達は私達のstore.jsの中のjia Actionに参加します。

setTimeout(()=>{
context.commit('jian')
},3000)
console.log('     ');

その結果を見てください。ジアンという方法は3 s後に実行されます。ジナを注文しても3 s以内に先に実行できます。これは非同期の修正状態と同期の違いです。
全体コードは以下の通りです
a.vue部分

<template>
<div>
 
<div>
 
{{count1}}
 
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>

全体コードは以下の通りです

<template>
<div>
 
<div>
 
{{count1}}
 
</div>
<p>
 <button @click="jiaAction">+</button>
 <button @click="jianAction">-</button>
</p>
</div>
</template>
<script>
  import store from '@/store'
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
  export default{
    data(){
      return{
       
      }
    },
  
 methods:{
  ...mapMutations([ 
    'jia','jian'
  ]),
  ...mapActions(['jiaAction','jianAction'])
}, 
 
   computed:{
   
   
   ...mapState(["count1"]),
 
 
   },
    
    store
    
  }
</script>
 

store.js部分

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//    

count1:1,



},
const mutations={//    
 jia(state,n){
    state.count1+=n;
  },
jian(state){
    state.count1--;
  },

},
const actions={
jiaAction(context){
setTimeout(()=>{
context.commit('jian')
},3000)
console.log('     ');
context.commit('jia',10)
/*      ，   store        jia()*/

},
jianAction({commit}){


commit('jian')/*      ，   store        jian()*/
}


}


export default new Vuex.Store({



state,
mutations,
getters,
actions/*  state,mutations        */
})

以上のこのvuex actionsの状態を修正した例の詳細は、小編集が皆さんに提供した内容の全部です。参考にしていただければと思います。よろしくお願いします。