Vuex入门（3）—— getters,mapGetters,...mapGetters详解

上一章讲了state的相关内容，若是说state对应vue中的data的话，那么getters就至关于vue中的computed，本章来详细了解下vuex的getters属性。

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

Vuex 容许咱们在 store 中定义“getter”（能够认为是store的计算属性）。就像计算属性同样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。说白了就是vue的computed,若是你了解computed的话,那你能够像使用computed同样去使用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}
复制代码

关于getters如何使用,能够看一下上面代码的注释,这里我重点介绍一下getters和computed的不一样,就是上面的第三种用法,我以后会在vue进阶系列中探讨computed，filters两种数据处理工具的局限性,有兴趣的也能够直接点击下面连接：

computed，filters两种数据处理工具的局限性

computed的一个缺点就是不能传参,假设你要去判断一个数组里是否存在某个值,那你无法将某个值传到computed中去,这实际上是一个很蛋疼的事情,固然你能够经过某些特殊手段,这里我不展开,有兴趣的能够留言.而getters则没有这个烦恼,有些对ES6语法使用较为吃力的同窗能够看下面的简易版本,来看看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 辅助函数

关于辅助函数的使用和对象展开符的使用我在本系列的第二章中已经说的很明白了,有兴趣的能够看一下下面的文章。

Vuex入门（2）—— state,mapState,...mapState对象展开符详解

<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>
复制代码

最后在说一句,不少状况下你是用不到getters的,请按需使用,不要用getters去管理state的全部派生状态,若是有多个子组件或者说子页面要用到,才考虑用getters.

不忘初心，方得始终

喜欢博主的童鞋能够扫描二维码加博主好友~ 也能够扫中间二维码入驻博主的粉丝群（708637831）~固然你也能够扫描二维码打赏并直接包养帅气的博主一枚。