全国咨询热线:18720358503

邵阳微信小程序开发_Vuex之了解Getters的用法实例

类别:行业新闻 发布时间:2021-01-12 浏览人次:

Vuex之理解Getters的用法实例       这篇文章主要介绍了Vuex之理解Getters的用法实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在介绍中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,puted中。但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义。我们可以认为,【getters】是store的计算属性。

2.如何使用

定义:我们可以在store中定义getters,第一个参数是state

const getters = {style:state = state.style}

传参:定义的Getters会暴露为store.getters对象,也可以接受其他的getters作为第二个参数;

使用:

computed: {
doneTodosCount () {
 return this.$store.getters.doneTodosCount}

3.mapGetters

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中,用法和mapState类似

import { mapGetters } from 'vuex'
computed: {
 // 使用对象展开运算符将 puted 对象中
 ...mapGetters([
 'doneTodosCount',
 'anotherGetter',])}
 //给getter属性换名字
 mapGetters({
 // 映射 this.doneCount 为 store.getters.doneTodosCount
 doneCount: 'doneTodosCount'

4.源码分析

wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters当前模块下所有的getters,modulePath对应模块的路径

 function `wrapGetters` (store, moduleGetters, modulePath) {
 Object.keys(moduleGetters).forEach(getterKey = {
 // 遍历先所有的getters
 const rawGetter = moduleGetters[getterKey]
 if (store._wrappedGetters[getterKey]) {
 console.error(`[vuex] duplicate getter key: ${getterKey}`)
 // getter的key不允许重复,否则会报错
 return
 store._wrappedGetters[getterKey] = function `wrappedGetter` (store{
 // 将每一个getter包装成一个方法,并且添加到store._wrappedGetters对象中,
 return rawGetter(
 //执行getter的回调函数,传入三个参数,(local state,store getters,rootState)
 getNestedState(store.state, modulePath), // local state
 //根据path查找state上嵌套的state 
 store.getters, 
 // store上所有的getters
 store.state 
 // root state)}}) 
 //根据path查找state上嵌套的state 
 function `getNestedState` (state, path) {
 return path.length
 path.reduce((state, key) = state[key], state): state} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

邵阳微信小程序开发_Vuex之了解Getters的用法实例

Vuex之了解Getters的使用方法案例 本文关键详细介绍了Vuex之了解Getters的使用方法案例,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧在详...

2021-01-12
微信小程序免费开店_详解nodejs express下使用redi

详细说明nodejs express下应用redis管理方法session Session完成基本原理完成恳求真实身份认证的方法许多,在其中一种普遍接纳的方法是应用网络服务器端造成的Session ID融合访问器的...

2021-01-12
广州凡科互联网科技股份有限公司招聘健康客服

招聘人数:16职位信息【岗位职责】1、负责为用户提供预约挂号的话务、挂号咨询服务等,及时解答用户在挂号过程中遇到的问题;2、处理用户投诉问题、回复、回访及信息录入工作;...

2021-01-12
广州凡科互联网科技股份有限公司招聘服装质检

招聘人数:24职位信息岗位职责:1、根据公司质量控制程序及检验流程,进行大货成品回货的全检工作;2、根据生产制单以及工艺要求,检查回库成品质量状况及跟进相关进度;3、发现...

2021-01-12
抖音头条微信小程序-Siclay喜客莱整体家具定制官

企业 融合全世界資源,依次同法国豪迈、海蒂诗、英国杜邦、德国百隆等国际性机器设备与原料供货商达到发展战略协作...掌握企业喜客莱2020全新升级驱动力 在2020这一年里,从年刚开...

2021-01-12
广州凡科互联网科技股份有限公司招聘网络推广

招聘人数:13职位信息岗位职责:1、负责公司推广、运营和维护;2、负责广告账户跟踪优化;3、负责为本部门提供推广相关建议和培训,提升团队的推广能力。任职要求1、大专及以上...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信