这节课主要跟大家一起学习vuex中getters和actions的使用
Getter和action在vuex里不经常使用，所以这节课也只是简单介绍一下。
首先介绍getter,有点类似于vue里的computed。它依赖于数据项的，如果数据项变化，老会触发getter,既而返回新数据。Getter里的方法需要传输state这个参数。
我们在store.js里做如下编写：
getters: {
gettersCount(state) {
return state.count * 2
}
}
PS：是getters，而不是getter噢〜切记切记
我们在页面里的引用为：
{{ this.$store.getters.gettersCount }}
当我们点击按钮后，count会加1, 当count变化时，会触发getters，返回count*2的数据。
Action与mutation有些类似，但又与其有些不同：
1. action不会直接改变state里的数据，它是通过先触发mutation，由mutation来改变state里的数据。
2. 可以进行异步操作。
接下来我们看下如何应用action吧
首先我们需要在store.js里编写如下：
actions: {
actionsCount(context) {
context.commit('increment')
}
}
接下来我们在about页面里先注销掉按钮的触发的操作，再将this.$store.dispatch('actionsCount')放入触发事件中。
PS：我们需要注意的是，
1. actionsCount里的参数是context,context是与store 实例具有相同方法和属性的对象。
2. 我们在about页面是通过store.dispatch 方法触发action的
3. 虽然显示的结果同mutation一样，但是流程是完全不一样的。目前的流程是先触发action，再触发mutation，再通过mutation里的方法改count数据。
这两个属性在vuex里不是很常用，我们只做为简单了解一下即可，在面试时如果被问到，我们知道怎么回事就可以了。
就到这里了，休息休息一会儿吧：）
微号：duzhan99
网友评论