说说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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
Three.js学习之几何形状
Aug 01 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 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+JS实现大规模数据提交的方法
2015/07/02 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python通过post提交数据的方法
2015/05/06 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
某公司.Net方向面试题
2014/04/24 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
自荐信的基本格式
2014/02/22 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
银行求职自荐信范文
2015/03/04 职场文书
运动与健康自我评价
2015/03/09 职场文书
初一军训感言
2015/08/01 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers