溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在vuex中使用 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(['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)里引入點擊事件
代碼如下：
<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>
有何不同？
沒有區別說明你調試代碼成功
第四步 進行異步驗證
我們在我們的store.js中的jiaAction加入jiaAction方法
setTimeout(()=>{
context.commit('jian')
},3000)
console.log('我先被執行');你再觀察結果，你會發現jian這個方法在3s之后執行，你點jia依然可以在3s之內先執行，這就是異步修改狀態與同步的區別。
整體代碼如下:
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的操作方法是相同*/
})看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
