Vuex之理解Getters的用法实例


Posted in Javascript onApril 19, 2017

1.什么是getters

在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义。我们可以认为,【getters】是store的计算属性。

2.如何使用

定义:我们可以在store中定义getters,第一个参数是state

const getters = {style:state => state.style}

传参:定义的Getters会暴露为store.getters对象,也可以接受其他的getters作为第二个参数;

使用:

computed: {
doneTodosCount () {
  return this.$store.getters.doneTodosCount}

3.mapGetters

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中,用法和mapState类似

import { mapGetters } from 'vuex'
computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
  ...mapGetters([
  'doneTodosCount',
  'anotherGetter',])}
 //给getter属性换名字
 mapGetters({
 // 映射 this.doneCount 为 store.getters.doneTodosCount
 doneCount: 'doneTodosCount'
})

4.源码分析

wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters当前模块下所有的gettersmodulePath对应模块的路径

function `wrapGetters` (store, moduleGetters, modulePath) {
   Object.keys(moduleGetters).forEach(getterKey => {
      // 遍历先所有的getters
    const rawGetter = moduleGetters[getterKey]
    if (store._wrappedGetters[getterKey]) {
     console.error(`[vuex] duplicate getter key: ${getterKey}`)
      // getter的key不允许重复,否则会报错
     return
    }
    store._wrappedGetters[getterKey] = function `wrappedGetter` (store{
      // 将每一个getter包装成一个方法,并且添加到store._wrappedGetters对象中,
      return rawGetter(
       //执行getter的回调函数,传入三个参数,(local state,store getters,rootState)
      getNestedState(store.state, modulePath), // local state
       //根据path查找state上嵌套的state 
      store.getters, 
        // store上所有的getters
      store.state 
         // root state)}}) 
   }
   
   //根据path查找state上嵌套的state 
  function `getNestedState` (state, path) {
     return path.length
      ? path.reduce((state, key) => state[key], state): state}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
Vuex之理解state的用法实例
Apr 19 #Javascript
微信小程序 聊天室简单实现
Apr 19 #Javascript
Vuex之理解Store的用法
Apr 19 #Javascript
微信小程序 判断手机号的实现代码
Apr 19 #Javascript
Vuex简单入门
Apr 19 #Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 #Javascript
微信小程序 slider的简单实例
Apr 19 #Javascript
You might like
php 函数使用方法与函数定义方法
2010/05/09 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
layui 实现表格某一列显示图标
2019/09/19 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
python如何查看微信消息撤回
2018/11/27 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
python 如何在测试中使用 Mock
2021/03/01 Python
css3的transition属性详解
2014/12/15 HTML / CSS
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
应届生会计电算化求职信
2013/10/03 职场文书
学生周末长期请假条
2014/02/15 职场文书
个人评语大全
2014/05/04 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL