内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

vuex初探(5)

2018-10-08 16:21 出处:清屏网 人气: 评论(0

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

分享给小伙伴们:
本文标签: vuex

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号