1. 在mutations中不能编写异步的代码,会导致vue调试器的显示出错。 在vuex中我们可以使用Action来执行异步操作。
2. 打开store.js文件,修改Action,如下:
actions: { addAsync(context,step){ setTimeout(()=>{ context.commit('add',step); },2000) } }
然后在Addition.vue中给按钮添加事件代码如下:
<button @click="AddAsync">...+1</button> methods:{ AddAsync(){ this.$store.dispatch('addAsync',5) } }
第二种方式:
import { mapActions } from 'vuex'
methods:{ ...mapMutations(['subAsync']) } 如下:
import { mapState,mapMutations,mapActions } from 'vuex' export default { data() { return {} }, methods:{ //获得mapMutations映射的sub函数 ...mapMutations(['sub']), //当点击按钮时触发Sub函数 Sub(){ //调用sub函数完成对数据的操作 this.sub(10); }, //获得mapActions映射的addAsync函数 ...mapActions(['subAsync']), asyncSub(){ this.subAsync(5); } }, computed:{ ...mapState(['count']) } }