为了账号安全,请及时绑定邮箱和手机立即绑定

37、vuex初探(五)

标签:
Html5 Vue.js vuex

前言:国庆归来,我们继续。
这章我们讲mapMutationsmapGetters这两个辅助函数,然后我们vuex基本的概念和使用方法到此就讲完了。
GitHub:https://github.com/Ewall1106/mall

1、mapMutations

(1)还是来看看这张图:

vuex状态管理机制

(2)通过这张图我们知道了vuex状态管理机制的一个大体步骤,但是,前面我有一点没提到,那就是在组件中,可以通过commit方法跳过1步骤直接提交mutations,如图:

组件直接使用commit方法提交mutations

(3)而mapMutations这种辅助函数不过就是为了简化操作:

使用mapMutations辅助函数

2、Getter

(1)说mapGetters这个辅助函数之前,我们还需要将store仓库再拆分一个getters.js文件出来,那么,这个文件是干嘛的呢?

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

(2)具体到我们的代码例子中,让我们把简单的问题复杂化,我们不直接获取state中的city值了,我们在getter.js中获取return返回state中的city值。

中返回中的值。

(3)然后我们还需要在index.js中注册

注册getters

(4)然后我们就可以访问到return返回的值了

Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值。

通过store.getters 对象

3、mapGetters

到这里快结尾了,你应该立刻明白这个辅助函数不过就是简化而已,不过这里有几点要注意一下,此辅助函数是个计算属性,所以:

  • mapMutations放到methods下;
  • mapActions放到methods下;
  • mapGetters放到computed下。

使用mapGetters辅助函数

4、小结

vuex的整个流程和一系列的辅助函数的使用到处就讲完了,大家根据自己的业务需求相应处理;然后就是官网还有更高级的用法,大家也可以自行琢磨。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7084
获赞与收藏
266

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消