vuex actions異步修改狀態(tài)的實(shí)例詳解

更新時(shí)間：2019年11月06日 10:19:41 作者：周行知

今天小編就為大家分享一篇vuex actions異步修改狀態(tài)的實(shí)例詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

actions異步修改狀態(tài)與mutations同步修改狀態(tài)是兩個(gè)容易混淆的概念，因?yàn)閮烧咴趫?zhí)行上，很難測試出兩者的差別，而我們要區(qū)別它們兩，首先你得區(qū)分同步與異步，我的理解是，同步更像是一條流水線作業(yè)，而異步則更像是多條，例子你比如打電話，我們通常是我打給我媽，打完之后，再跟我爸打，而異步更像是某聊天工具，你既可以跟你爸聊，又可以跟你媽聊，你跟你媽聊可以在你爸的后面，也可以在他前面，你爸也是

而actions與mutations的區(qū)別就在此，mutations是你進(jìn)行用百度錢包買一件商品時(shí)，你必須先把東西購買流程走完你才能再購買另一件商品而actions是你完全可以一樣在準(zhǔn)備結(jié)算時(shí)，你可以選擇其他商品，結(jié)算完其他商品再進(jìn)行商品的結(jié)算，也可以一起結(jié)算。

下面我具體介紹actions寫法

第一步在你建立vuex的store.js中聲明actions方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//狀態(tài)對象
 
count1:1,
 
 
 
},
const mutations={//觸發(fā)狀態(tài)
 jia(state,n){
    state.count1+=n;
  },
 jian(state){
    state.count1--;
  },
 
},
const actions={
jiaAction(context){
 
context.commit('jia',10)
/*這句話就是說，我現(xiàn)在store調(diào)用了同步的方法jia()*/
 
},
jianAction({commit}){
 
 
commit('jian')/*這句話就是說，我現(xiàn)在store調(diào)用了同步的方法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(['jiaAction','jianAction'])

格式一般都是固定照抄即可

代碼如下：

<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)里引入點(diǎn)擊事件

代碼如下：

<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>

注:現(xiàn)在你點(diǎn)擊你的+或-的按鈕，觀察它的值與你把

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

換成

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

有何不同？

沒有區(qū)別說明你調(diào)試代碼成功

第四步進(jìn)行異步驗(yàn)證

我們在我們的store.js中的jiaAction加入jiaAction方法

setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被執(zhí)行');

你再觀察結(jié)果，你會(huì)發(fā)現(xiàn)jian這個(gè)方法在3s之后執(zhí)行，你點(diǎn)jia依然可以在3s之內(nèi)先執(zhí)行，這就是異步修改狀態(tài)與同步的區(qū)別。

整體代碼如下:

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={//狀態(tài)對象

count1:1,



},
const mutations={//觸發(fā)狀態(tài)
 jia(state,n){
    state.count1+=n;
  },
jian(state){
    state.count1--;
  },

},
const actions={
jiaAction(context){
setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被執(zhí)行');
context.commit('jia',10)
/*這句話就是說，我現(xiàn)在store調(diào)用了同步的方法jia()*/

},
jianAction({commit}){


commit('jian')/*這句話就是說，我現(xiàn)在store調(diào)用了同步的方法jian()*/
}


}


export default new Vuex.Store({



state,
mutations,
getters,
actions/*這與state,mutations的操作方法是相同*/
})

以上這篇vuex actions異步修改狀態(tài)的實(shí)例詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: