说说Vuex的getters属性的具体用法


Posted in Javascript onApril 15, 2019

什么是getters

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

源码分析

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

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}

1 应用场景

假设我们在 Vuex 中定义了一个数组:

const store = new Vuex.Store({
  state: {
    list:[1,3,5,7,9,20,30]
  }
 ...
})

业务场景希望过滤出大于 5 的数。马上想到的方法可能的是:在组件的计算属性中进行过滤:

<template>
  <div>
    {{list}}
  </div>
</template>
<script>
  export default {
    name: "index.vue",
    computed: {
      list() {
        return this.$store.state.list.filter(item => item > 5);
      }
    }
 }
</script>

效果:

说说Vuex的getters属性的具体用法

功能虽然实现了,但如果其它组件也需要过滤后的数据,那么就得把 index.vue 中的计算过滤代码复制出来。如果过滤规则发生变化,还得一一修改这些组件中的计算属性,很难维护。这种场景下,我们就可以使用 getters 属性啦O(∩_∩)O~

2 基础用法

main.js:

const store = new Vuex.Store({
  state: {
    list: [1, 3, 5, 7, 9, 20, 30]
  },
  getters: {
    filteredList: state => {
      return state.list.filter(item => item > 5)
    }
  }
})

index.vue:

<script>
  export default {
    name: "index.vue",
    computed: {
      list() {
        return this.$store.getters.filteredList;
      }
    }
  }
</script>

效果达到了,而且只需要在一处维护过滤规则即可。

3 内部依赖

getter 可以依赖其它已经定义好的 getter。比如我们需要统计过滤后的列表数量,就可以依赖之前定义好的过滤函数。

main.js:

const store = new Vuex.Store({
  state: {
    list: [1, 3, 5, 7, 9, 20, 30]
  },
  getters: {
    filteredList: state => {
      return state.list.filter(item => item > 5)
    },
    listCount: (state, getters) => {
      return getters.filteredList.length;
    }
  }
})

index.vue:

<template>

  <div>
    过滤后的列表:{{list}}
    <br>
    列表长度:{{listCount}}
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    computed: {
      list() {
        return this.$store.getters.filteredList;
      },
      listCount() {
        return this.$store.getters.listCount;
      }
    }
  }
</script>

效果:

说说Vuex的getters属性的具体用法

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

Javascript 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 #Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解javascript对数组和json数组的操作
Apr 15 #Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 #Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 #Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 #Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 #Javascript
You might like
PHP中的类-什么叫类
2006/11/20 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python编程中的for循环语句学习教程
2015/10/14 Python
浅谈Django REST Framework限速
2017/12/12 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
社保缴纳证明申请书
2014/11/03 职场文书
优秀员工推荐材料
2014/12/20 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL