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 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php调用shell的方法
2014/11/05 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
ajax java 实现自动完成功能
2012/12/19 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
实例讲解React 组件
2020/07/07 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python多线程和队列操作实例
2015/06/21 Python
python安装与使用redis的方法
2016/04/19 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python中logging日志库实例详解
2020/02/19 Python
python中setuptools的作用是什么
2020/06/19 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
以下的初始化有什么区别
2013/12/16 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
作风整顿剖析材料
2014/09/30 职场文书
体育活动总结
2015/02/04 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
python 网络编程要点总结
2021/06/18 Python