actions

actions虽然功能上和mutations一样都是修改状态的，但mutations是同步的，actions是异步修改状态，那什么是异步，就好像你在网上购物付完款了你就什么不用管了，想做什么做什么，而你买的东西则会被卖家按部就班的操作最后运输到你面前，而同步就好像是你在商场买电器，必须等店员去仓库取货然后跟着你回家，你才能做其他事。在编程中，同步就是你必须执行完我这个步骤你才能往下走，就像mutations的操作，而actions是我调了之后会像是在另一个支路去完成我要的这个任务，而我本来的这个支路就可以接着往下走

---

import {mapState, mapMutations,mapActions} from 'vuex'

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

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

const actions = {
    addAction(context){
        context.commit('add',10);
        setTimeout(()=>{context.commit('reduce',1)},3000);
        console.log("我比reduce先执行");
    },
    reduceAction({commit}){
       commit('reduce',1)
    }
}
//context：上下文对象，这里你可以理解称store本身。
//{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

需要注意的是这里我们加了个验证异步，你可以看到就算没执行setTimeout，控制台还是马上输出了