vue2视频教程系列第二十七节—vuex中getters和actions的使用

　　

　　这节课主要跟大家一起学习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) {

　　contextmit('increment')

　　}

　　}

　　接下来我们在about页面里先注销掉按钮的触发的操作，再将this.$store.dispatch('actionsCount')放入触发事件中。

　　PS：我们需要注意的是，

　　1. actionsCount里的参数是context,context是与store 实例具有相同方法和属性的对象。

　　2. 我们在about页面是通过store.dispatch 方法触发action的

　　3. 虽然显示的结果同mutation一样，但是流程是完全不一样的。目前的流程是先触发action，再触发mutation，再通过mutation里的方法改count数据。

　　这两个属性在vuex里不是很常用，我们只做为简单了解一下即可，在面试时如果被问到，我们知道怎么回事就可以了。

　　就到这里了，休息休息一会儿吧：）