vuex actions異步修改狀態(tài)的實(shí)例詳解
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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用vue開發(fā)一個(gè)所謂的數(shù)獨(dú)方法實(shí)例
數(shù)獨(dú)是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲,是一種運(yùn)用紙、筆進(jìn)行演算的邏輯游戲。下面這篇文章主要給大家介紹了關(guān)于利用vue開發(fā)一個(gè)所謂的數(shù)獨(dú)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-12-12
解決修復(fù)報(bào)錯(cuò)Error in render:TypeError:Cannot read&n
這篇文章主要介紹了解決修復(fù)報(bào)錯(cuò)Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
關(guān)于axios配置多個(gè)請求地址(打包后可通過配置文件修改)
這篇文章主要介紹了關(guān)于axios配置多個(gè)請求地址(打包后可通過配置文件修改),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題
這篇文章主要介紹了淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08

