【Vue】getters

除了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.mzph.cn/news/851547.shtml

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

相关文章

C++网络编程基础

文章目录 协议局域网通信IP 地址网络通信的本质tcp 和 udp 协议网络字节序网络主机数据转化接口 协议 协议&#xff1a;收到数据后&#xff0c;多出来的那一部分&#xff0c;也叫一种 “约定”&#xff0c;一整套的自硬件到软件&#xff0c;都有协议&#xff0c;需要有人定制&a…

如何使用Python在word文档中创建表格

如何使用Python在word文档中创建表格 介绍效果代码 介绍 本文将介绍如何使用Python库python-docx在Word文档中创建表格。 效果 插入表格前的word文档&#xff1a; 插入表格后的word文档&#xff1a; 代码 from docx import Document# 加载现有的Word文档 doc Document(…

重新学习STM32(1)GPIO

概念简介 GPIO 是通用输入输出端口的简称&#xff0c;简单来说就是 STM32 可控制的引脚。STM32 芯片通过 GPIO 引脚与外部设备连接起来&#xff0c;从而实现与外部通讯、控制以及数据采集的功能。 GPIO被分成很多组&#xff0c;比如 GPIOA和GPIOB等。所有的 GPIO引脚都有基本的…

C语言期末概念题100道

花括号“{”和“}”只能作为函数体的定界符 F。花括号不仅可以作为函数体的定界符&#xff0c;还可以用于其他块结构&#xff0c;如控制语句&#xff08;if、while、for等&#xff09;和复合语句。 C程序中的每行只能写一条语句 F。C语言中每行可以包含多条语句&#xff0c;只需…

【护网简历模版】改了10个在校大学生的简历的感想

护网简历模版 吉祥学安全知识星球&#x1f517;除了包含技术干货&#xff1a;Java代码审计、web安全、应急响应等&#xff0c;还包含了安全中常见的售前护网案例、售前方案、ppt等&#xff0c;同时也有面向学生的网络安全面试、护网面试等。 在上篇文章中&#xff1a;如何面试…

前端JS必用工具【js-tool-big-box】学习,获取当前浏览器向上滚动还是向下滚动,获取当前距离顶部和底部的距离

这一小节&#xff0c;我们说一下 js-tool-big-box 添加的最新工具方法&#xff0c;在日常前端开发工作中&#xff0c;如果网页很长&#xff0c;我们就需要获取当前浏览器是在向上滚动&#xff0c;还是向下滚动。如果向上滚动&#xff0c;滚动到0的时候呢&#xff0c;需要做一些…

Linux网络命令——netstat

netstat是Linux系统中非常有用的网络工具&#xff0c;被称为是网络监控中的军工刀&#xff0c;足见其地位。 传统上&#xff0c;它用于问题确定而不是性能测量&#xff0c;但是也可用于查看网络上的流量&#xff0c;以确定性能问题是否由于网络阻塞引起。 netstat用于显示与I…

建筑二建考试试题及答案,分享几个实用搜题和学习工具 #微信#经验分享

大学生必备的搜题工具&#xff0c;专业课本习题、电子版教材、考研资料、英语四六级等考试题目也能一并搜索&#xff0c;每道题目都有详细的讲解&#xff0c;每个都堪称大学神器。 1.掌上识别王 一个可以快速纸质书籍上内容扫描成电子档的工具&#xff0c;为了方便大家快速搜…

好用的Web数据库管理工具SQLynx

SQLynx 是一款功能强大且用户友好的 Web 数据库管理工具&#xff0c;原生支持个人和企业用户&#xff0c;专为简化数据库管理和操作而设计。 目录 1 主要特点 2 优势 3 典型使用场景 4 示例 5 结论 SQLynx原名SQL Studio&#xff0c;产品100%自主研发&#xff0c;无任何开…

OSI七层网络参考模型

一、物理层 我们要发送出去的数据在计算机里只不过是无数的0和1&#xff0c;0或1就叫做比特&#xff0c;物理层就是把这些比特用不同的媒介传输出去&#xff0c;可以用电、光或者其他形式的电磁波来表示和传输信号&#xff0c;数据从网络接口出去以后&#xff0c;会经过不同的网…

dat.gui图形用户页面

一、导入 1.npm安装 npm install --save dat.gui 引入&#xff1a; // CommonJS: const dat require(dat.gui); // ES6: import * as dat from dat.gui; const gui new dat.GUI(); 二、控制器 <!DOCTYPE html> <html lang"en"> <head><…

【重磅开源】MapleBoot权限控制使用介绍(菜单权限、按钮权限、数据权限)

基于SpringBootVue3开发的轻量级快速开发脚手架 ## &#x1f341;项目简介 一个通用的前、后端项目模板 一个快速开发管理系统的项目 一个可以生成SpringBootVue代码的项目 一个持续迭代的开源项目 一个程序员的心血合集 度过严寒&#xff0c;终有春日&#…

Spring (50)Ribbon

Netflix Ribbon是一个客户端负载均衡器&#xff0c;它提供了一系列完善的配置项&#xff1a;如连接超时、重试、负载均衡策略等。在微服务架构中&#xff0c;Ribbon通常被用于调用其它服务&#xff0c;通过负载均衡选择一个最佳的服务实例进行交互。Spring Cloud将Ribbon整合在…

【深度学习】Loss为Nan的可能原因

文章目录 1. 问题情境2. 原因分析3. 导致Loss为Nan的其他可能原因 1. 问题情境 在某个网络架构下&#xff0c;我为某个数据项引入了一个损失函数。 这个数据项是nn.Embedding类型的&#xff0c;我加入的损失函数是对nn.Embedding空间做约束。 因为我在没加入优化loss前&#x…

C# WPF入门学习主线篇(八)—— ListBox常见属性和事件

C# WPF入门学习主线篇&#xff08;八&#xff09;—— ListBox常见属性和事件 欢迎来到C# WPF入门学习系列的第八篇。在前面的文章中&#xff0c;我们已经探讨了WPF中的Button、TextBox和Label控件的使用。今天&#xff0c;我们将深入了解WPF中的另一个常用控件——ListBox。本…

GPS原理与接收机设计

将伪码中的一位二进制数称为一个码片&#xff0c;或者称为一个码元&#xff0c;一个码片的持续时间称为码宽&#xff0c;单位时间内所包含的码片数目称为码率。 GPS信号中的C/A码属于金码&#xff0c;能产生金码的一对m序列称为优选m序列对。通过调节其中一个m序列的延时&…

Pulsar 社区周报 | No.2024-06-07 | Apache Pulsar 新分支 3.3 版本发布

“ 各位热爱 Pulsar 的小伙伴们&#xff0c;Pulsar 社区周报更新啦&#xff01;这里将记录 Pulsar 社区每周的重要更新&#xff0c;每周发布。 ” 本期主题&#xff1a;Apache Pulsar 新分支 3.3 版本发布 Apache Pulsar 新分支 3.3 版本发布&#xff1a;Apache Pulsar 3.3.0[1…

必备:产品经理工作文档大全

产品经理&#xff08;英文&#xff1a;Product manager&#xff0c;缩写&#xff1a;PM&#xff09;也称产品企划&#xff0c;是指在公司中针对某项或某类的产品进行规划和管理的人员&#xff0c;主要负责产品的研发、制造、营销、渠道等工作。 产品经理是很难定义的一个角色&a…

DeepSORT(目标跟踪算法)中的数值表格与调参的关系

DeepSORT&#xff08;目标跟踪算法&#xff09;中的数值表格与调参的关系 flyfish DeepSORT&#xff08;目标跟踪算法&#xff09;中的马氏距离详解&#xff08;很详细&#xff09; DeepSORT&#xff08;目标跟踪算法&#xff09;中 可以设置阈值进行异常检测或目标跟踪的原…

在Ubuntu20.04上安装Apache、MySQL和PHP的基本步骤

1安装Apache&#xff1a; sudo apt update sudo apt install apache2 2安装MySQL&#xff1a; sudo apt install mysql-server 3安装PHP以及常用扩展&#xff1a; sudo apt install php libapache2-mod-php php-mysql 4配置Apache和PHP&#xff1a; sudo nano /etc/apac…