[5]actions异步修改状态

资料来源于技术胖的个人网站

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。

actions可以调用Mutations里面的方法。

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

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

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

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

methods:{
    ...mapMutations([  
        'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])//把两个方法加入到mapActions
},

增加异步检验

我们现在看的效果和我们用Mutations作的一模一样，肯定有的小伙伴会好奇，那actions有什么用。

我们为了演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeOut进行延迟执行。

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

我们可以看到在控制台先打印出了‘我比reduce提前执行’这句话。