（1）简介

Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化

（2）设置-----------文件：src/store/index.js

例如利用getter即store中的计算属性，将价格大于8000的筛选出来。

（3）获取---单文件组件.vue中用this.$store.getters获取

渲染结果：
======>

（4）小结

①Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值

②mapGetters 辅助函数可以将 store 中的 getter 映射到局部计算属性

.

Vuex之store仓库计算属性Getter的更多相关文章

  1. vuejs计算属性getter和setter

    当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里面,获取的时候会自动去执行get方法 <div id='app'> {{fullName}} < ...

  2. vuex学习与实践——mapState、getter、mapGetters

    1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...

  3. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  4. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  5. swift的计算属性和懒加载

    计算属性每次都重新计算. 懒加载只计算一次. 可以借助backing store将计算属性转化为懒加载属性. 计算属性实质上退化为函数调用. 计算属性的标示是get.set.

  6. 简述Vue中的计算属性

    1.什么是计算属性 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性: <template> <div id=" ...

  7. Vuex异步请求数据通过computed计算属性值

    问题描述: 使用Vuex管理数据时,在组件内使用$emit分发事件后,获取回来的数据要自动更新到该组件内,需要使用computed来计算更新. 一开始尝试使用赋值给data的方法,后来发现重新发起aj ...

  8. 3-4 计算属性的setter和getter

    Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...

  9. Vuex的五个核心属性

    Vuex的五个核心属性 Vuex的五个核心概念 本文参考自Vue文档,说的非常详细,建议看文档. Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vu ...

随机推荐

  1. MySQL 执行插入报错 - Incorrect string value: '\xE4\xB8\xAD\xE6\x96\x87' for column 'name' at row 1

    报错的原因就是在执行插入时对Name这个字段被赋予了错误的字符串值:’\xE4\xB8\xAD\xE6\x96\x87’ 实际上就函数里面的变量接收到的值编码格式跟它定义的不一致.  使用navica ...

  2. [HeadFrist-HTMLCSS学习笔记]第二章深入了解超文本：认识HTML中的“HT”

    [HeadFrist-HTMLCSS学习笔记]第二章深入了解超文本:认识HTML中的"HT" 敲黑板!!! 创建HTML超链接 <a>链接文本(此处会有下划线,可以单击 ...

  3. Python OpenCV4获取轮廓最大内切圆和外接圆

    为了方便讲解,我们先来创建一个多边形做演示 第一步:创建图像,并绘制一个六边形.代码和生成图像如下: # Create an image r = 100 src = np.zeros((4*r, 4* ...

  4. Python 的 Pandas 对矩阵的行进行求和

    Python 的 Pandas 对矩阵的行进行求和: 若使用 df.apply(sum) 方法的话,只能对矩阵的列进行求和,要对矩阵的行求和,可以先将矩阵转置,然后应用 df.apply(sum) 即 ...

  5. zabbix 搭建 mysql 连接报错

    如图所示: 查看 MySQL的配置文件 [root@zbxtest ~]# cat /etc/my.cnf [mysqld] datadir=/data/mysql socket=/data/mysq ...

  6. HashMap源码1

    jdk1.8之前是数组+链表的形式,后面会介绍jdk1.8对hashMap的改动:数组+链表+红黑树 transient是Java语言的关键字,用来表示一个域不是该对象串行化的一部分. 当一个对象被串 ...

  7. [转帖]深入理解latch: cache buffers chains

    深入理解latch: cache buffers chains http://blog.itpub.net/12679300/viewspace-1244578/ 原创 Oracle 作者:wzq60 ...

  8. 第四节：EF Core的并发处理

    1.说明 和EF版本的并发处理方案一致,需要知道乐观并发和悲观并发的区别,EF Core只支持乐观并发:监控并发的两种方案:监测单个字段和监测整条数据,DataAnnotations 和 Fluent ...

  9. 生成Makefile文件全过程

    [1]生成Makefile文件全过程 整体流程如下图: 注意:以下文件根目录为testmake(任意位置新建即可) (1)测试程序 1.1 建立两个目录:mkdir include source 1. ...

  10. SqlServer 2012 清理日志 截断日志的方法

    ALTER DATABASE test SET RECOVERY SIMPLE WITH NO_WAITALTER DATABASE test SET RECOVERY SIMPLE --简单模式DB ...