美文网首页vue教程程序员
vue2视频教程系列第二十七节—vuex中getters和act

vue2视频教程系列第二十七节—vuex中getters和act

作者: 独绽2018 | 来源:发表于2018-10-09 07:28 被阅读8次

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

相关文章

网友评论

    本文标题:vue2视频教程系列第二十七节—vuex中getters和act

    本文链接:https://www.haomeiwen.com/subject/vlnsaftx.html