前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >37、vuex初探(五)

37、vuex初探(五)

作者头像
Ewall
发布2018-10-08 12:13:13
4230
发布2018-10-08 12:13:13
举报
文章被收录于专栏:vue学习vue学习vue学习

前言:国庆归来,我们继续。 这章我们讲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值。

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.10.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、mapMutations
  • 2、Getter
  • 3、mapGetters
  • 4、小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档