继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

37、vuex初探(五)

慕姐8265434
关注TA
已关注
手记 1275
粉丝 222
获赞 1065

1、mapMutations

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

webp

vuex状态管理机制

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

webp

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

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

webp

使用mapMutations辅助函数

2、Getter

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

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

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

webp

`getter.js`中`return`返回`state`中的`city`值。

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

webp

注册getters

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

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

webp

通过store.getters 对象

3、mapGetters

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

  • mapMutations放到methods下;

  • mapActions放到methods下;

  • mapGetters放到computed下。

webp

使用mapGetters辅助函数

4、小结

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



作者:Ewall_
链接:https://www.jianshu.com/p/7cbac5c9813d


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP