怎么在vuex中使用 actions异步修改状态

怎么在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的操作方法是相同*/ })

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。