【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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实验四、零比特插入《计算机网络》

但凡这句话有一点用的话也不至于一点用都没有。 目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 掌握零比特插入原理及方法使用任意编程语言实现零比特插入方法。 二、实验内容 掌握零比特插入原理及方法 点对点协议 PPP&#xff08;Point-to-Point Protoco…

8.11 矢量图层线要素单一符号使用六(光栅线)

文章目录 前言光栅线&#xff08;Raster Line&#xff09;QGis设置线符号为光栅线&#xff08;Raster Line&#xff09;二次开发代码实现光栅线&#xff08;Raster Line&#xff09; 总结 前言 本章介绍矢量图层线要素单一符号中光栅线&#xff08;Raster Line&#xff09;的使…

Navicat导入json文件(json文件数据导入到MySQL表中)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

Threejs-05、设置响应式画布与全屏控制。

1、自适应屏幕大小 你会发现,我们前面写好的代码,在页面尺寸发生改变的时候,并不能自适应的改变尺寸,而出现空白或者滚动条突出的情况。所以监听屏幕大小的改变,来重新设置相机的宽高比例和渲染器的尺寸大小,代码如下: // 监听画面变化,更新渲染画面 window.addEven…

删除的东西怎么恢复?5个方法,找回误删数据!

“我刚刚一不小心在电脑上误删了一些数据&#xff0c;想问问大家有什么方法可以恢复删除的东西吗&#xff1f;请帮帮我&#xff01;” 在数据时代&#xff0c;我们每天会在电脑上保存很多重要的数据&#xff0c;这些数据不仅包括我们的学习资料、工作信息&#xff0c;还有各种个…

DeepSORT(目标跟踪算法)中自由度决定卡方分布的形状

DeepSORT&#xff08;目标跟踪算法&#xff09;中自由度决定卡方分布的形状 flyfish 重要的两个点 自由度决定卡方分布的形状&#xff08;本文&#xff09; 马氏距离的平方在多维正态分布下服从自由度为 k 的卡方分布 独立的信息 在统计学中&#xff0c;独立的信息是指数据…

震撼!AI语言模型突破瓶颈,26个提示词原则引领GPT-4响应质量飙升57.7%!你的模型还在等什么?

不是模型不够强大&#xff0c;是你的提示不够精准。 当大型语言模型如ChatGPT在各领域大放异彩时&#xff0c;普通用户却对其指令设计一头雾水。这篇论文揭秘了与模型交流的秘诀&#xff0c;仅凭优化提示&#xff0c;就让GPT-4响应质量和准确性分别飙升57.7%和36.4%&#xff0…

重生奇迹mu套装掉的地点一览

1、目前只有三个地方掉套装&#xff1a;赤色要塞&#xff0c;不是100%掉&#xff0c;靠运气。卡利玛7&#xff0c;杀困顿能掉。魔炼之地&#xff0c;只有城主盟成员可以进入。 2、只有攻城城主盟可以进入的地图“魔炼之地”掉套装&#xff0c;暴率几乎为0。如果你是敏法的话&am…

C++ 判断目标文件是否被占用(独占)(附源码)

在IM软件中发起文件发送时,如果要发送的是某word文件,并且该word文件被office打开,则会提示文件正在被占用无法发送,如下所示: 那文件被占用到底是如何判断出来的呢?其实很简单,调用系统API函数CreateFile,打开该文件(OPEN_EXISTING),传入FILE_SHARE_READ共享读标记…

MySQL—多表查询—练习(2)

一、引言 接着上篇博客《 MySQL多表查询——练习&#xff08;1&#xff09;》继续完成剩下的案例需求。 二、案例 &#xff08;0&#xff09;三张表&#xff08;员工表、部门表、薪资等级表&#xff09; 员工表&#xff1a;emp 部门表&#xff1a;dept 薪资等级表&#xff1a;…

CF297C Splitting the Uniqueness 题解

CF297C Splitting the Uniqueness 题解 非常好构造题&#xff0c;使我的草稿纸旋转。 解法 我们记输入的数组为 a a a&#xff0c;需要输出的两个数组为 b , c b,c b,c&#xff08;因为当时起变量名起的&#xff09;。 考虑利用 a i a_i ai​ 互不相同的性质。 先将 a…

Kaggle -- Titanic - Machine Learning from Disaster

新手kaggle之旅&#xff1a;1 . 泰坦尼克号 使用一个简单的决策树进行模型构建&#xff0c;达到75.8%的准确率&#xff08;有点低&#xff0c;但是刚开始&#xff09; 完整代码如下&#xff1a; import pandas as pd import numpy as npdf pd.read_csv("train.csv&quo…

Spring Boot 分片上传、断点续传、大文件上传、秒传,应有尽有

文件上传是一个老生常谈的话题了&#xff0c;在文件相对比较小的情况下&#xff0c;可以直接把文件转化为字节流上传到服务器&#xff0c;但在文件比较大的情况下&#xff0c;用普通的方式进行上传&#xff0c;这可不是一个好的办法&#xff0c;毕竟很少有人会忍受&#xff0c;…

《Brave New Words 》5.1 传递真相:偏见和虚假信息现状

Part V: Keeping Kids Safe 第五部分&#xff1a;确保孩子安全 Never travel faster than your guardian angel can fly. —Mother Teresa 永远不要比你的守护天使飞得更快。 ——特蕾莎修女 Distrust and caution are the parents of security. —Benjamin Franklin 不信任和谨…

使用 actor-critic 方法来控制 CartPole-V0 游戏

CartPole 介绍 在一个光滑的轨道上有个推车&#xff0c;杆子垂直微置在推车上&#xff0c;随时有倒的风险。系统每次对推车施加向左或者向右的力&#xff0c;但我们的目标是让杆子保持直立。杆子保持直立的每个时间单位都会获得 1 的奖励。但是当杆子与垂直方向成 15 度以上的…

Java开发基础技能简介

一、Java版本 JavaSE&#xff1a;标准版 JavaEE&#xff1a;企业版 二、IDEA工程中的模块 1.打开工程所在文件夹 鼠标右键点模块——open in——explorer 2.修改模块名 鼠标右键点模块——refactor-rename-rename module and directory 3.导出模块 ctrl c&#xff0c;…

LLM系列:KVCache及优化方法

前言 Transformer encode-base模型&#xff0c;推理和训练过程高度统一&#xff08;差异仅仅是否存在反向&#xff09;&#xff0c;而decoder-base模型&#xff08;如GPT、LLama2&#xff09;&#xff0c;推理与训练差异性比较大&#xff1a; 自回归推理全量prompt增量tokenK…

公司电脑文件防泄密软件系统——天锐绿盾 | 透明加密、防泄密系统

天锐绿盾是一款专业的企业信息安全防护软件&#xff0c;旨在防止公司内部文件的泄露。它提供了多种功能来保护敏感数据&#xff0c;确保企业信息的安全。 PC地址&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 以下是天锐绿盾的主…

[Java基础揉碎]网络相关概念

目录 网络通信 网络 ip地址 ​编辑 域名 ​编辑 网络协议 TCP和UDP 网络编程比较重要的的InetAddress类 Socket ​编辑 tcp字节流编程 案例一 案例二​编辑 案例三 网络上传文件 ​编辑​编辑 ​编辑 netstat tcp网络通信客户端也是通过端口和服务端进行通讯的…

输入失调电流是什么?

输入失调电流与输入补偿电流概念一样&#xff08;input offset current&#xff09;&#xff1a;同相减去反相输入端偏置电流的差值。这是由生产工艺导致同相与反相端的电流大小方向都会有所不同。 第一种情况&#xff1a;同相输入端减去反相输入端 第一种情况&#xff1a;同相…