vuex学习进阶篇之getters的使用教程

目录
  • 1.设置gettes 事件
  • 2.使用调用
  • 3.最终页面示例
  • getters的优点：
  • 总结

紧接上篇，本片主要讲讲vuex 中 getters的使用，示例中使用了vuex的modules，getters的使用与vue组件中computed中使用类似，再学习的过程中，注意举一反三

1.设置gettes 事件

index.js

dict.js

我们在index.js中设置了两个getters事件，在子模块dict.js中设置了两个getters事件

2.使用调用

<template>
  <div>
    <div>
      <div>{{ $store.getters.getterAge }}</div>
      <div>{{ $store.getters.getterAgeCompare(18) }}</div>
      <div>{{ $store.getters.getterAgeCompare(10) }}</div>
      /
      <div>{{ getterAge }}</div>
      <div>{{ getterAgeCompare(18) }}</div>
      <div>{{ getterAgeCompare(10) }}</div>
    </div>
    -----------------------------------------------------------------------------
    <div>
      <div>{{ $store.getters["dict/getterDict"] }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](1) }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](2) }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](3) }}</div>
      /
      <div>{{ getterDict }}</div>
      <div>{{ getterDictCompare(1) }}</div>
      <div>{{ getterDictCompare(2) }}</div>
      <div>{{ getterDictCompare(3) }}</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"; //第二种方式 1.引入
export default {
  data() {
    return {};
  },
  computed: {
    //   第一种形式 数组形式
    ...mapGetters(["getterAge", "getterAgeCompare"]), //使用对象展开运算符将 getter 混入 computed 对象中
    // 第二种方式 对象形式
    ...mapGetters({
      getterDict: "dict/getterDict",
      getterDictCompare: "dict/getterDictCompare",
    }),
  },
  methods: {},
};
</script>

3.最终页面示例

getters的优点：

此外，使用getters的好处还可以使代码更加简洁，对于获取同样的数据，直接调用同一个方法即可，不需要每个组件都单独写一遍函数，直接调用在getters写好的方法就可以。

总结

到此这篇关于vuex学习进阶篇之getters使用的文章就介绍到这了,更多相关vuex getters的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vuex中getters的基本用法解读

    目录 getters的基本用法解读 一.getter 定义 二.使用方法 三.mapGetters辅助函数 四.getters注意事项 getters的两种调用方法 方法一 方法二 getters的基本用法解读 一.getter 定义 Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作. 就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 二.使用方法 1.通

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

    什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 源码分析 wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters

  • Vuex之理解Getters的用法实例

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

  • 详解Vuex中getters的使用教程

    详解Vuex中getters的使用教程

    目录 简介 说明 官网 getters概述 说明 来源 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:getters. 官网 Getter | Vuex API 参考 | Vuex getters概述 说明 getters 是Store的计算属性,可以对State进行计算操作.就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 虽然组件内也可以做计算属性,但getters 可以在多组件之间复用.如果一个状态只在一个

  • 对vuex中getters计算过滤操作详解

    getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5

  • vuex学习进阶篇之getters的使用教程

    目录 1.设置gettes 事件 2.使用调用 3.最终页面示例 getters的优点: 总结 紧接上篇,本片主要讲讲vuex 中 getters的使用,示例中使用了vuex的modules,getters的使用与vue组件中computed中使用类似,再学习的过程中,注意举一反三 1.设置gettes 事件 index.js dict.js 我们在index.js中设置了两个getters事件,在子模块dict.js中设置了两个getters事件 2.使用调用 <template> <

  • C语言学习进阶篇之万字详解指针与qsort函数

    C语言学习进阶篇之万字详解指针与qsort函数

    目录 前言 函数指针 代码一 代码二 函数指针数组 函数指针数组的用途 计算器的基本代码 函数指针实现简单的计算机 函数指针数组实现简单计算机 指向函数指针数组的指针 回调函数 简单的冒泡排序 冒泡排序的优化 qsort函数 qsort函数介绍 qsort实现冒泡排序 qsort排序结构数据 模拟实现qsort函数 写在最后 前言 前面学到了字符指针,指针数组是一个存储指针的数组,数组指针是一个指向函数的指针,数组参数和指针参数.其中不乏有很多需要注意的知识点,例如:&数组名和数组名表示的含义,

  • vuex新手进阶篇之改变state mutations的使用

    目录 1. 设置改变state的mutations事件 2.提交mutations事件(常用的两种方法) 总结 紧接上篇文章,本篇文章讲vuex ,如何去改变state ,mutations的使用,我依然使用了vuex的modules 1. 设置改变state的mutations事件 index.js dict.js 2.提交mutations事件(常用的两种方法) <template> <div> <div> 改变vuex index.js 下的state <d

  • Linux学习第二篇 Java环境安装配置教程

    Linux学习第二篇 Java环境安装配置教程

    本文教程为大家分享了Java环境安装配置,供大家参考,具体内容如下 jdk版本:jdk-8u131-linux-x64.rpm 注:以下操作在root用户或具有root权限的用户下操作 一.将 dk-8u131-linux-x64.rpm拷贝到/home目录下 cp jdk-8u131-linux-x64.rpm /home/ 二.解压rpm文件 rpm -ivh jdk-8u131-linux-x64.rpm 三.环境变量的配置 注:环境变量的配置稍微麻烦一点,不过也不是特别难. 1.输入以下

  • jqGrid 学习笔记整理——进阶篇(一 )

    jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • Vue学习笔记进阶篇之函数化组件解析

    Vue学习笔记进阶篇之函数化组件解析

    这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法.它只是一个接收参数的函数. 在这个例子中,我们标记组件为 functional, 这意味它是无状态(没有 data),无实例(没有 this 上下文). 一个 函数化组件 就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的

  • Vue学习笔记进阶篇之vue-router安装及使用方法

    Vue学习笔记进阶篇之vue-router安装及使用方法

    介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

  • Python序列操作之进阶篇

    简介 Python 的序列(sequence)通常指一个可迭代的容器,容器中可以存放任意类型的元素.列表和元组这两种数据类型是最常被用到的序列,python内建序列有六种,除了刚刚有说过的两种类型之外,还有字符串.Unicode字符串.buffer对像和最后一种xrange对像,这几种都是不常使用的.本文讲解了列表推导式.切片命名.列表元素排序.列表元素分组的使用方法.学习了 Python 基本的列表操作后,学习这些进阶的操作,让我们写出的代码更加优雅简洁和 pythonic . 列表推导式 当

  • C++学习进阶之Makefile基础用法详解

    C++学习进阶之Makefile基础用法详解

    目录 1. Makefile基本语法与执行 2. Makefile简化过程 3. Makefile生成并使用库 3.1 动态库的建立与使用 3.2 动态加载库的建立与使用 总结 1. Makefile基本语法与执行 为什么要使用 Makefile? Makefile 文件描述了整个工程的编译.链接的规则. 为工程编写 Makefile 的好处是能够使用一行命令来完成"自动化编译".只需提供一个(通常对于一个工程来说会是多个)正确的 Makefile,接下来每次的编译都只需要在终端输入&

随机推荐