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) {

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