Vuex入门(3)—— getters,mapGetters,...mapGetters详解
买泛域名SSL证书 送5斤装现摘猕猴桃一箱、同时提供技开源商城搭建免费技术支持。
泛域名ssl证书 239元1年送1个月、单域名39元1年,Sectigo(原Comodo证书)全球可信证书,强大的兼容性,高度安全性,如有问题7天内可退、可开发票
加微信VX 18718058521 备注SSL证书
【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价
2.
泛域名ssl证书 239元1年送1个月、单域名39元1年,Sectigo(原Comodo证书)全球可信证书,强大的兼容性,高度安全性,如有问题7天内可退、可开发票
加微信VX 18718058521 备注SSL证书
【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价
Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如
computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } }
但是如果你的其他组件也要使用这种改造方式去改造这个值,那你可能不得不去复制粘贴这个函数到别的组件中,当然,为了解决这个问题,vuex本身就提供了类似于计算属性的方式,getters可以让你从store的state中派生出一些新的状态,当然如果不是多个组件要用到这个状态,或者说每个子组件用到的派生属性不一样,那么,你完全可以不用getters.(这里多说一句吧,vuex的出现是为了解决组件间的通信问题,如果你的操作或者数据不涉及到公共操作,只是单一组件操作,请务必不要把这些状态值或者function存储到vuex中,因为vuex会把自身挂载到所有组件上,不管当前组件是否用到里面的东西,因此这事实上肯定增加了性能的损耗,注意是肯定,因为你很难保证每个子组件都用到同一个状态,除非是路由这样的特殊状态,当然路由的事情也无需归vuex管理,在后面vue-router系列中会讲到.)
1.getters
//state.js let state = { from: 'china', arr: [2, 3, 1, 4, 6] } export default state
// getters.js // 第一个参数是state let address = (state) => { return '国籍:' + state.from } // 第二个参数可以访问getters let addressMore = (state, getters) => { return '其他描述' + getters.address } // return 一个function,这个function可以传参,当然这个function最后会返回一个具体的数值 //本例中这个方法用于查询state中的arr数组是否存在某个值 let findArr = (state) => (number) => { let ifExit = state.arr.find((n) => n === number) // arr.find是ES6语法中数组的扩展 if (typeof (ifExit) === 'undefined') { return false } else { return true } } export {address, addressMore, findArr}
let findArr = function(state){ // 返回一个匿名函数 return function(number){ // 如果有相同的则返回n,如果找不到则返回undefined let ifExit = state.arr.find(function(n){ return n===number }) if (typeof (ifExit) === 'undefined') { return false } else { return true } } }
最后我们在子组件中展示一下效果
<template> <div> <div>{{from}}</div> <div>{{from2}}</div> </div> </template> <script> // import { mapGetters } from 'vuex' export default { computed: { from: function () { return this.$store.getters.address }, from2: function () { return this.$store.getters.addressMore } }, created () { console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>
2.mapGetters
辅助函数
<template> <div> <div>{{from}}</div> <div>{{from2}}</div> </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: mapGetters({ 'from': 'address', 'from2': 'addressMore', 'find': 'findArr' }), created () { console.log(this.find(1)) // 由于getters已经通过computed挂载到当前实例,所以你不需要再通过this.$store.getters的方法去访问 console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>
3....mapGetters
<template> <div> <div>{{from}}</div> <div>{{from2}}</div> </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters({ 'from': 'address', 'from2': 'addressMore', 'find': 'findArr' }) }, created () { console.log(this.find(1)) // 由于getters已经通过computed挂载到当前实例,所以你不需要再通过this.$store.getters的方法去访问 console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>