vuex actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。（视频中有讲解）

在store.js中声明actions

actions是可以调用Mutations里的方法的，我们还是继续在上节课的代码基础上进行学习，在actions里调用add和reduce两个方法。

 

1 2 3 4 5 6 7 8

const actions ={     addAction(context){         context.commit('add',10)     },     reduceAction({commit}){         commit('reduce')     } }

在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

• context：上下文对象，这里你可以理解称store本身。
• {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

模板中的使用

我们需要在count.vue模板中编写代码，让actions生效。我们先复制两个以前有的按钮，并改成我们的actions里的方法名，分别是：addAction和reduceAction。

 

1 2 3 4

<p>   <button @click="addAction">+</button>   <button @click="reduceAction">-</button> </p>

改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入。

 

1 2 3 4 5 6

methods:{     ...mapMutations([           'add','reduce'     ]),     ...mapActions(['addAction','reduceAction']) },

你还要记得用import把我们的mapActions引入才可以使用。

增加异步检验

我们现在看的效果和我们用Mutations作的一模一样，肯定有的小伙伴会好奇，那actions有什么用，我们为了演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeOut进行延迟执行。

 

1 2	setTimeOut(()=>{context.commit(reduce)},3000); console.log('我比reduce提前执行');