然后在Count.vue中对computed进行配置，在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，所以要用展开运算符”…”对上节写的computed属性进行一个改造。
computed: { ...mapState(["count"]), count() { return this.$store.getters.count; } }
需要注意的是，此时如果点击'+'，就会增加102，如果点击'-',就会增加99，最后的结果是mutations和getters共同作用的。
4.actions如何实现异步修改状态
actions和上面的Mutations功能基本一样，不同点是， actions是异步的改变state状态，而Mutations是同步改变状态 。
①在store.js中声明actions
actions: { addAction(context) { context.commit('add', 2);//一开始执行add,并传递参数2 setTimeout(() => { context.commit('reduce') }, 2000);//两秒后会执行reduce console.log('我比reduce提前执行'); }, reduceAction({ commit }) { commit('reduce') } }
actions是可以调用Mutations里的方法的,调用add和reduce两个方法。在addAction里使用setTimeOut进行延迟执行。在actions里写了两个方法addAction和reduceAction，两个方法传递的参数也不一样。
context：上下文对象，这里你可以理解称store本身。 {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了
②模板中的使用
<p> <button @click="addNumber">+</button> <button @click="reduceNumber">-</button> </p> <p> <button @click="addAction">+</button>//新增 <button @click="reduceAction">-</button>//新增 </p>
import { mapState, mapGetters, mapActions } from "vuex"; methods:{ ...mapMutations([ 'add','reduce' ]), ...mapActions(['addAction','reduceAction']) }
最后得到如下效果：点击addAction按钮事件时，先累加2，两秒后再减去1，而addNumber事件则不能实现异步效果。
