vuex 中关于mapGetters 的作用 - 博客园

mapGetters 工具函数会将store 中的getter 映射到局部计算属性中。

它的功能和mapState 非常类似，我们来直接看它的实现： mapGetters 的实现也 ... 首页 新闻 博问 专区 闪存 班级 我的博客 我的园子 账号设置 简洁模式... 退出登录 注册 登录 每天都要进步一点点 善始者实繁，克终者盖寡。

技术栈：angular+ionic+vue+mint-ui+react-native+teaset+h5plus+mui+nodejs+webpack+gulp+ES6+vux+typescript2+weex+weex-ui+微信小程序+react+ant-design+ant-design-mobile+material-ui+nervjs+taro+taro-ui+springboot vuex中关于mapGetters的作用 　　mapGetters工具函数会将store中的getter映射到局部计算属性中。

它的功能和mapState非常类似，我们来直接看它的实现： exportfunctionmapGetters(getters){ constres={} normalizeMap(getters).forEach(({key,val})=>{ res[key]=functionmappedGetter(){ if(!(valinthis.$store.getters)){ console.error(`[vuex]unknowngetter:${val}`) } returnthis.$store.getters[val] } }) returnres } 　　mapGetters的实现也和mapState很类似，不同的是它的val不能是函数，只能是一个字符串，而且会检查valinthis.$store.getters的值，如果为false会输出一条错误日志。

为了更直观地理解，我们来看一个简单的例子： import{mapGetters}from'vuex' exportdefault{ //... computed:{ //使用对象扩展操作符把getter混入到computed中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', //... ]) } } 　　经过mapGetters函数调用后的结果，如下所示： import{mapGetters}from'vuex' exportdefault{ //... computed:{ doneTodosCount(){ returnthis.$store.getters['doneTodosCount'] }, anotherGetter(){ returnthis.$store.getters['anotherGetter'] } } } 　　再看一个参数mapGetters参数是对象的例子： computed:mapGetters({ //映射this.doneCount到store.getters.doneTodosCount doneCount:'doneTodosCount' }) 　　经过mapGetters函数调用后的结果，如下所示： computed:{ doneCount(){ returnthis.$store.getters['doneTodosCount'] } } . posted@ 2017-10-0722:38  每天都要进步一点点  阅读(8798)  评论(0)  编辑  收藏  举报 刷新评论刷新页面返回顶部 Copyright©2022每天都要进步一点点 Poweredby.NET6onKubernetes