当前位置:首页 > 日记 > 正文

Vuex之理解Getters的用法实例

Vuex之理解Getters的用法实例

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}  

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

相关文章

在word2013如何绘制简易流程图

在word2013如何绘制简易流程图

流程图,绘制,简易,电脑软件,  在日常学习和办公中,你有无法画出流程图的困扰吗?还在考虑下载并使用visio绘制流程图么?。其实使用Word2013也可以快速轻松搞定流程图,那么下面就由小编为您分享下绘制简易流程图的技巧,希望能帮助您。绘制简易…

Excel中怎么利用函数进行筛选Excel

Excel中怎么利用函数进行筛选Excel

函数,筛选,方法,步骤,公式,  在数据库中,面对一组重复度很高的数据时,若想提取其中出现过哪些数据,去掉冗余项,那么我们可以有group by语句来实现。今天,小编就教大家在Excel中进行函数筛选公式的操作技巧,欢迎大家来到学习。Excel中进行函数筛…

使用jQuery卸载全部事件的思路详解

使用jQuery卸载全部事件的思路详解

卸载,事件,详解,思路,电脑软件,说到事件, jquery 做了不少,当然也有 data 的很多功劳,因为原生 js 不支持匿名卸载事件的,而她为了开发者好用支持了匿名的匿名事件的思路首先她会判断目标是否是元素或者对象,如果是元素,则在元素上打一个标…

详解angularJS+Ionic移动端上传的

详解angularJS+Ionic移动端上传的

上传,移动端,解决办法,详解,电脑软件,前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也…

Word中2007版设置批注的操作技巧

Word中2007版设置批注的操作技巧

设置,操作技巧,操作步骤,电脑软件,Word,  很多人可能都遇到这样的情况,要对给定的文档,进行修改,修改之处要标记出来,也就是指出要修改的地方,或者直接一点,就是新建批注。今天,小编就教大家在Word中2007版设置批注的操作技巧。Word中2007版设置…

excel表格怎么连续设置页码

excel表格怎么连续设置页码

连续,设置,方法,页码,表格,  Excel中的页码需要连续进行设置,页码具体该如何进行连续的设置呢?下面是小编带来的关于excel表格连续设置页码的方法,希望能帮到大家。!excel表格连续设置页码的方法设置页码步骤1:打开excel,点击页面设置—…

excel2003冻结首行首列的方法excel

excel2003冻结首行首列的方法excel

冻结,行首,方法,电脑软件,strong,  Excel中的首行首列具体该如何进行冻结呢?接下来是小编为大家带来的excel2003冻结首行首列的方法,供大家参考。excel2003冻结首行首列的方法冻结首行首列步骤1:单击“视图”选项卡,然后单击&ldqu…

如何设置PPT2010幻灯片页面大小

如何设置PPT2010幻灯片页面大小

设置,幻灯片,大小,页面,如何设置,  一般来说,PPT幻灯片页面大小都是固定的,这对于追求艺术的人来说,限制了他的发挥。这样就无法设计出令人拍案叫绝的PPT演示文稿。以下是小编为您带来的关于设置PPT2010幻灯片页面大小,希望对您有所帮助。设…

BootStrap 标题设置跨行无效的解决

BootStrap 标题设置跨行无效的解决

无效,设置,跨行,解决方法,标题,最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐。),发现标题设置跨行属性rowspan无效。html如下:<table class="table table-borde…

JavaScript程序设计高级算法之动态

JavaScript程序设计高级算法之动态

动态规划,程序设计,高级算法,实例分析,电脑软件,本文实例讲述了JavaScript程序设计高级算法之动态规划。分享给大家供大家参考,具体如下:主要是看了《数据结构与算法》有所感悟,虽然这本书被挺多人诟病的,说这有漏洞那有漏洞,但并不妨碍我们从中…

Word中出现文档打不开出错误时的操

Word中出现文档打不开出错误时的操

文档,错误,操作方法,打不开,操作步骤,  发现电脑里面的word无法打开,刚开始还以为是整个office崩溃了,然后又试了一下PPT灯片和excel表格,都能正常打开,只有word出问题了。今天,小编就教大家在Word中出现文档打不开出错误时的操作方法。Word中…

如何将Excel2007文本格式转换为数

如何将Excel2007文本格式转换为数

数字,文本,转换为,格式,如何将,  文本格式要将其转换成为数字?首先,文本格式可以通过设置单元格的字体格式得到。以下是小编为您带来的关于将Excel2007文本格式转换为数字,希望对您有所帮助。将Excel2007文本格式转换为数字1、选中要转换格…