【Vue】getters

news2024/11/19 3:45:46

除了state之外,有时我们还需要从state中筛选出符合条件的一些数据,这些数据是依赖state的,此时会用到getters

getters就类似于属性中的计算属性

这个getter只有获取,如果需要设置修改,还是需要经过mutations

getters里的数据也是响应式的

例如,state中定义了list,为1-10的数组,

state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

组件中,需要显示所有大于5的数据,正常的方式,是需要list在组件中进行再一步的处理,但是getters可以帮助我们实现它

1.定义getters

  getters: {
    // 要求:
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

2.使用getters

2.1原始方式-$store

<div>{{ $store.getters.filterList }}</div>

2.2辅助函数 - mapGetters

computed: {
    // mapState 和 mapGetters都是映射属性,所以应该往computed里写
    ...mapGetters(['filterList'])
}
 <div>{{ filterList }}</div>

使用小结

68344213391

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1811759.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Langchain与ChatGLM实现本地知识库(二)

前言 大语言模型也只是将用户提供的大规模数据集训练而来&#xff0c;也并非万能的什么都知道&#xff0c;特别是一些小众知识、内部数据或私密的个人数据等&#xff0c;此时ChatGLM3肯定会胡乱回答就是ChatGPT4也不一定能给出满意回答&#xff1b;不少公司、个人都有自己的知…

可视化数据科学平台在信贷领域应用系列二:数据清洗

上一篇文章中&#xff0c;某互联网银行零售信贷风险建模专家使用数据科学平台Altair RapidMiner——完成了数据探索工作&#xff0c;《可视化数据科学平台在信贷领域应用系列一&#xff1a;数据探索》。本次这位建模专家再次和大家分享数据准备的第二步骤&#xff0c;数据清洗。…

什么是单片机?单片机的详解

单片机&#xff08;Microcontroller Unit&#xff0c;简称 MCU&#xff09;是一种集成了处理器、存储器、输入/输出接口和其他外设功能的微型计算机系统。它可以用于各种应用领域&#xff0c;如嵌入式系统、自动化控制、通信设备、家电、汽车电子等。 单片机的基本结构 以下是…

限流器设计思路(浅入门)

限流器(Rate Limiter)是一种用于控制系统资源利用率和质量的重要机制。它通过限制单位时间内可以执行的操作数量&#xff0c;从而防止系统过载和保护服务的可靠性。在程序设计中&#xff0c;可以使用多种方式来实现限流器&#xff0c;下面是几个常见方案的介绍&#xff1a; 令牌…

这三款很实用的工具,助你事半功倍!

AllDup——删除重复文件的工具 AllDup是一款用于删除电脑内重复文件的工具&#xff0c;避免重复占用电脑的存储空间&#xff0c;支持搜索整个文件夹中的重复文件或者使用对比功能&#xff0c;查询出不同文件夹中相同的文件。 使用排除功能&#xff0c;可以过滤掉某些不需要搜索…

SpringCloudAlibaba组件集成

SpringCloudAlibaba组件集成 Nacos服务注册与发现 1.Nacos认识与安装 1.1.什么是Nacos Nacos和Eureka有着相同的能力&#xff0c;甚至更为强大&#xff0c;作为Dubbo 生态系统中重要的注册中心实现。官方对它有如下定义&#xff1a; Nacos致力于帮助您发现&#xff0c;配置…

亚信安慧AntDB数据库与云信达eCloud Data Master 云数据管理系统软件V4完成兼容性互认证

日前&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧&#xff09;与南京云信达科技有限公司&#xff08;简称&#xff1a;云信达&#xff09;&#xff0c;完成了AntDB数据库产品与云信达eCloud Data Master云数据管理系统软件V4的兼容性互认证。 双…

javaWeb项目-在线考试系统详细功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、Java简介 Java语…

mysql中 事务的隔离级别与MVCC

大家好。今天我们来讲一下事务的隔离级别和MVCC。在讲之前&#xff0c;我们先创建一张表&#xff0c;方便我们的讲解&#xff1a; CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY KEY (number) ) EngineInnoDB CHARSETutf8;创建完毕后我…

专业编程显示器明基RD280U,赋能开发者共创科技新纪元

距离ChatGPT问世仅有17个月&#xff0c;OpenAI就推出了颠覆生产力的GPT-4o。这是整个智能时代的一次再进化&#xff0c;GPT-4o不但能实时处理文本、音频和图像&#xff0c;甚至能在232毫秒内实时响应音频输入&#xff0c;几乎与真人对话无异。 当人们惊叹于这项“充满人性”的…

Docker未授权访问漏洞详解

目录 Docker简介 Docker未授权访问漏洞原理 Docker未授权访问漏洞复现 环境搭建 漏洞利用 写入密钥免密登录 写入计划任务反弹shell fofa实战 Docker简介 Docker是一个开源的引擎&#xff0c;可以轻松地为任何应用创建一个轻量级的、可移植的、自给自足的容器。 Docke…

DDei在线设计器-DDeiCore-图形插件

DDei-Core-图形 DDei-Core-图形插件包含了基础绘图形状与基础流程形状两个分组&#xff0c;大约100来个图形&#xff0c;能够满足很基本的框图、架构图、流程图的绘制。 图形以分组的形式组织&#xff0c;一个分组中包含多个图形&#xff0c;一个图形也能够同时存在于多个分组。…

李廉洋:6.11黄金原油持续震荡,今日美盘最新分析策略。

黄金消息面分析&#xff1a;周一&#xff08;6月10日&#xff09;金价有所回升&#xff0c;此前一个交易日&#xff0c;金价创下了三年半以来的最大跌幅&#xff0c;原因是中国和美国公布的数据令押注中国需求和美联储降息的投机者感到失望。截至发稿&#xff0c;现货金上涨0.5…

【Unity+AI01】在Unity中调用DeepSeek大模型!实现AI对话功能!

要在Unity中调用DeepSeek的API并实现用户输入文本后返回对话的功能&#xff0c;你需要遵循以下步骤&#xff1a; 获取API密钥&#xff1a; 首先&#xff0c;你需要从DeepSeek获取API密钥。这通常涉及到注册账户&#xff0c;并可能需要订阅相应的服务。 集成HTTP请求库&#xf…

西南交通大学【操作系统实验6】

实验目的 学习如何产生一个系统调用&#xff0c;以及怎样通过往内核中增加一个新函数&#xff0c;从而在内核空间中实现对用户空间的读/写。学习重建内核。 实验内容 &#xff08;1&#xff09;设计并实现一个新的系统调用pedagogictime() &#xff0c;该函数通过使用一个引用…

Stable diffusion的SDXL模型,针不错!(含实操)

与之前的SD1.5大模型不同&#xff0c;这次的SDXL在架构上采用了“两步走”的生图方式&#xff1a; 以往SD1.5大模型&#xff0c;生成步骤为 Prompt → Base → Image&#xff0c;比较简单直接&#xff1b;而这次的SDXL大模型则是在中间加了一步 Refiner。Refiner的作用是什么呢…

Base64编码和ASCII编码

1字节Byte 8比特bit 单位换算关系Byte1Byte 8bitKB1024ByteMB1024KBGB1024MB 网速中的Mbps和MB/s Mbps 1M bit/s 1024 K bit/s 1024 * 1024 bit/s MB/s 1024 KB/s 1024 * 1024 B/s 1024 * 1024 * 8 bit/s 所以&#xff1a;1Mbps 1/8 MB/s 1个bit&#xff0c;可以表示…

利用Python的NLTK库来查询指定单词的同义词

一、NTLK库介绍 NLTK&#xff08;Natural Language Toolkit&#xff09; 是Python中最为知名的自然语言处理&#xff08;NLP&#xff09;库之一&#xff0c;它提供了丰富的模块和数据结构&#xff0c;专门用于人类语言数据的统计自然语言处理。它包含了文本处理库用于分类、标记…

手机丢失不惊慌,华为手机已升级至楼层级设备查找!

出门总是丢三落四&#xff0c;手机丢了怎么办&#xff1f;不要怕&#xff0c;只要你的华为手机升级至云空间新版本&#xff0c;就可以进行楼层级设备查找&#xff0c;现在可以查看到具体的楼层了&#xff01; 之前有手机丢失过的朋友&#xff0c;肯定有相似的经历&#xff0c…

网页宽度现在右侧有一个竖条空白,怎么啦车网站都没办法完全铺满宽度,怎么回事怎么解决

问: 网页宽度怎么设置全覆盖 回答: 经过检查,发现 是这个网站的最外层html标签设置了宽度,所以导致,当我们删除html的宽度后就解决了这个问题.