vuex怎样写actions异步修改状态
1、第一步 在你建立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的操作方法是相同*/})
2、第二步 在你的模板(比如a.vue)里引入你需要actions方法1)import引入mapActionsimport {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>
3、第三步在你的组件的模板(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中的jiaAction加入jiaActio艘绒庳焰n方法 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的操作方法是相同*/})