vue中getters、...mapGetters的使用 - 简书

关于getters如何使用,可以看一下上面代码的注释,这里我重点介绍一下getters和computed的不同,就是上面的第三种用法,我之前在vue进阶系列中探讨 ... vue中getters、...mapGetters的使用Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ returnthis.$store.state.sex+'加个字符串,算是改造' } } 但是如果你的其他组件也要使用这种改造方式去改造这个值,那你可能不得不去复制粘贴这个函数到别的组件中,当然,为了解决这个问题,vuex本身就提供了类似于计算属性的方式,getters可以让你从store的state中派生出一些新的状态,当然如果不是多个组件要用到这个状态,或者说每个子组件用到的派生属性不一样,那么,你完全可以不用getters.(这里多说一句吧,vuex的出现是为了解决组件间的通信问题,如果你的操作或者数据不涉及到公共操作,只是单一组件操作,请务必不要把这些状态值或者function存储到vuex中,因为vuex会把自身挂载到所有组件上,不管当前组件是否用到里面的东西,因此这事实上肯定增加了性能的损耗,注意是肯定,因为你很难保证每个子组件都用到同一个状态,除非是路由这样的特殊状态,当然路由的事情也无需归vuex管理,在后面vue-router系列中会讲到.) 1.getters Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。

就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

说白了就是vue的computed,如果你了解computed的话,那你可以像使用computed一样去使用getters,当然还是有点区别的. //state.js letstate={ from:'china', arr:[2,3,1,4,6] } exportdefaultstate //getters.js //第一个参数是state letaddress=(state)=>{ return'国籍:'+state.from } //第二个参数可以访问getters letaddressMore=(state,getters)=>{ return'其他描述'+getters.address } //return一个function,这个function可以传参,当然这个function最后会返回一个具体的数值 //本例中这个方法用于查询state中的arr数组是否存在某个值 letfindArr=(state)=>(number)=>{ letifExit=state.arr.find((n)=>n===number)//arr.find是ES6语法中数组的扩展 if(typeof(ifExit)==='undefined'){ returnfalse }else{ returntrue } } export{address,addressMore,findArr} 关于getters如何使用,可以看一下上面代码的注释,这里我重点介绍一下getters和computed的不同,就是上面的第三种用法,我之前在vue进阶系列中探讨过computed，filters两种数据处理工具的局限性,有兴趣的可以去看这篇文章,computed的一个缺点就是不能传参,假设你要去判断一个数组里是否存在某个值,那你没法将某个值传到computed中去,这其实是一个很蛋疼的事情,当然你可以通过某些特殊手段,这里我不展开,有兴趣的可以留言.而getters则没有这个烦恼,有些对ES6语法使用较为吃力的同学可以看下面的简易版本,来看看findArr究竟做了什么. letfindArr=function(state){ //返回一个匿名函数 returnfunction(number){ //如果有相同的则返回n，如果找不到则返回undefined letifExit=state.arr.find(function(n){ returnn===number }) if(typeof(ifExit)==='undefined'){ returnfalse }else{ returntrue } } } 最后我们在子组件中展示一下效果 结果如图所示 20180830142851972.png 2.mapGetters辅助函数 关于辅助函数的使用和对象展开符的使用我在本系列的第二章中已经说的很明白了,有兴趣的可以看一下这个链接 3....mapGetters 最后在说一句,很多情况下你是用不到getters的,请按需使用,不要用getters去管理state的所有派生状态,如果有多个子组件或者说子页面要用到,才考虑用getters. 原文链接：https://blog.csdn.net/dkr380205984/article/details/82220250 推荐阅读更多精彩内容vuex使用说明安装npmnpminstallvuex--save在一个模块化的打包系统中，您必须显式地通过Vue.u...萧玄辞阅读2,669评论0赞7vuex的使用配置vuex和vuex本地持久化目录vuex是什么vuex的五个核心概念State定义状态(变量...稻草人_9ac7阅读673评论0赞5无标题文章是###store1.Vue组件中获得Vuex状态```js//方式一全局引入单例类//创建一...芸豆_6a86阅读217评论0赞0vuex梳理###store1.Vue组件中获得Vuex状态```js//方式一全局引入单例类//创建一...芸豆_6a86阅读483评论0赞3Vue笔记##框架和库的区别?>框架(framework):一套完整的软件设计架构和**解决方案**。

>>库(lib...Rui_bdad阅读2,450评论1赞4小程序，小苹果，小而美今天，也就是2017年1月9号，零点，微信小程序发布。

那么这个被认为会写入互联网史的发明，为何要选择在今天发布呢...年少影追阅读184评论0赞0没有如果如果你爱我瀚海没有涛音也没有飞鸟广电2班卢家宁20阅读127评论1赞1JavaScriptPuzzlers!44个JavaScript变态题解析第1题map接受两个参数，一个是回调函数callback，一个是...小小的白菜阅读555评论0赞7就算生活是一坨翔，我也要把它过成一首诗随着年岁渐长，慢慢发现，其实完美的生活是没有的。

羡慕朋友圈里的光鲜亮丽吗？向往别人口中谁谁谁的土豪生活吗？恼怒为啥...糖心弹壳阅读311评论2赞6抽奖1赞2赞赞赏更多好文