Vue进阶(二十七):Vuex 之 getters, mapGetters, …mapGetters详解[通俗易懂]

Vue进阶(二十七):Vuex 之 getters, mapGetters, …mapGetters详解[通俗易懂]Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如computed:{sex:function(){returnthis.$store.state.sex+’加个字符串,算是改造’}}但是如果你的其他组件也要使用这种改造方式去改造这…

大家好,又见面了,我是你们的朋友全栈君。


一、前言

Vuex提供了state状态统一管理树,开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然,也可以在接收原值的基础上对这个值做出一些改造,如:

computed:{ 
   
  sex:function(){ 
   
      return this.$store.state.sex + '加个字符串,算是改造'    
  }
}

但是,如果其他组件也要使用这种改造方式去改变这个值,那你可能不得不去复制粘贴这个函数到别的组件中。

为了解决这个问题,vuex本身提供了类似于计算属性的方式,getters可以让你从storestate中派生出一些新状态,当然如果不是多个组件要用到这个状态,或者说每个子组件用到的派生属性不一样,那么,你完全可以不用getters

其实,Vuex的出现是为了解决组件间的通信问题。如果你的操作或者数据不涉及到公共操作,只是单一组件操作,请务必不要把这些状态值或者function存储到vuex中,因为vuex会把自身挂载到所有组件上,不管当前组件是否用到里面的东西,因此这事实上肯定增加了性能的损耗,注意是肯定,因为你很难保证每个子组件都用到同一个状态,除非是路由这样的特殊状态,当然路由的事情也无需归vuex管理,在后面vue-router中会讲到。

二、getters

Vuex 允许在 store 中定义“getter”(可认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算。说白了,就是vuecomputed,如果你了解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如何使用,可以看一下上面代码注释,这里重点介绍一下getterscomputed的不同,就是上面的第三种用法。

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>

结果如下所示.
在这里插入图片描述

三、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>

四、…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

五、拓展阅读

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131454.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • dpdk技术详解_dpdk acl

    dpdk技术详解_dpdk acligb_uio是dpdk内部实现的将网卡映射到用户态的内核模块,它是uio模块的一个实例。igb_uio是一种pci驱动,将网卡绑定到igb_uio隔离了网卡的内核驱动,同时igb_uio完成网卡中断内核态初始化并将中断信号映射到用户态。igb_uio与uio模块密切相关,我将从uio模块着手分析igb_uio模块的工作原理。uio模块分析uio可以看做是一种字符设备驱动,在此驱动中注册了单独的file_operations函数表,uio设备可以看做是

    2022年10月25日
  • 扫清盲点,如何正确的从HttpClient 3.x系统升级到HttpClient 4.x

    扫清盲点,如何正确的从HttpClient 3.x系统升级到HttpClient 4.x如果周期比较长的项目,或者这个项目开发人员换过了好几拨人,很有可能出现一些奇怪的问题,比如一个项目中出现了多种Spring注入bean的方式,不同版本的jar冲突等等爬虫项目有的时候更是过犹不及,拿模拟登陆来说,开发人员的迭代,每个人的风格和技术各不相同,模拟登陆的方式也是五花八门,早在之前看到过一个项目的源码,其中使用HttpClient也是各种风格,虽然官方已经强烈建议使用HttpClie…

  • python pycharm 调试(debug)快捷键「建议收藏」

    python pycharm 调试(debug)快捷键「建议收藏」1.eclipse配置的debug快捷键1.showexecutionpoint(alt+F10)显示当前所有断点2.stepover(F6)单步调试。若函数A内存在子函数a时,不会进入子函数a内执行单步调试,而是把子函数a当作一个整体,一步执行3.stepinto(F5)单步调试。若函数A内存在子函数a时,会进入子函数a内执行单步调试。4.stepintomycode(Alt+Shift+F7)执行下一行但忽略libraries(导入库的语句)5.force

    2022年10月30日
  • keil注册机激活的方法

    keil注册机激活的方法一次用注册机产生密码,在license里可能不可以激活。第一次运行一定要记住,要以管理员的身份运行mdk。以管理员的身份运行,注册成功。记录一下

  • 支付风控模型

    支付风控模型支付风控数据仓库建设 。支付风控涉及到多方面的内容,包括反洗钱、反欺诈、客户风险等级分类管理等。其中最核心的功能在于对实时交易进行风险评估,或者说是欺诈检测。如果这个交易的风险太高,则会执行拦截。由于反欺诈检测是在交易时实时进行的,在要求不能误拦截的同时,还有用户体验上的要求,即不能占用太多时间,一般要求风控操作必须控制在100ms以内,对于交易量大的业务,10ms甚至更低的性能要求都是必须的。

  • Moya 浅析_motivationally

    Moya 浅析_motivationallyMoya是一个高度抽象的网络库,他的理念是让你不用关心网络请求的底层的实现细节,只用定义你关心的业务。且Moya采用桥接和组合来进行封装(默认桥接了Alamofire),使得Moya非常好扩展,让你不用修改Moya源码就可以轻易定制。官方给出几个Moya主要优点:编译时检查APIendpoint权限让你使用枚举定义各种不同Target,endpoints把stubs当做…

    2022年10月25日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号