Vuex状态管理:Getters :VOA模式

简介:

Getters 用于对 Store 中的数据进行加工处理形成新的数据。

Getters 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
Store 中数据发生变化,Getters 的数据也会跟着变化。

案列

/src/store/index.js状态管理器

import axios, { Axios } from 'axios';
import { CHANGE_APPISSHOW } from './type.js'
import { createStore } from 'vuex'const store = createStore({state() {return {appIsShow: true,datalist: [],}},//同步mutations: {changeAppIsShow(state, boolParams) {state.appIsShow = boolParams;},dataListInit(state, arrParams) {state.datalist = arrParams;}},//异步+同步:action不能直接修改state()中的数据,它是也是向mutations提交数据来修改的。actions: {async getDataList(store) {//异步const result = await axios({url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3777796",headers: {'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257","bc":"110100"}','X-Host': 'mall.film-ticket.cinema.list'}});console.log("获取数据")//同步:向mutations提交数据:触发dataListInit函数,并向函数传递了一个数组参数store.commit("dataListInit", result.data.data.cinemas);}},//getters:就相当于vue的计算属性。为什么vue有computed计算属性了,这里还要搞一个getters呢?那是因为架构师想尽可能的把数据的处理过程放到vuex中,vue就作为一个展示数据的地方,实现纯粹的业务,数据分离//getters:的函数传递参数需要放到匿名函数中来做getters: {filterDataList(state) { //这个state就是state()中的数据return (intParams) => { //这个intParams就是触发filterDataList这个函数的调用方(我们自己)传递的// return state.datalist.filter(item => {//     return item.eTicketFlag === 0// })//注意上面注释代码中匿名函数item=>{return item.eTicketFlag === 0} :加了{}就需要在里面多一个returnreturn state.datalist.filter(item =>item.eTicketFlag==intParams)}}}
});export default store

main.js 注册状态状态管理器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'//import store from "../src/store" //状态管理器js          注意:如果仅仅是指定了一个文件夹router,程序会自动去router文件夹下寻找index.js,并导入
//import store from "../src/store/index" //导入状态管理器js    注意:.js可以省略
//import store from "../src/store/myindex.js" //导入状态管理器js  注意:如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了import store from "../src/store/index.js" //导入状态管理器js var app=createApp(App)app.use(store)  //注册vuex插件:状态管理器app.mount("#app")

在组件中使用

<template><select v-model.number="type"><option :value="0">App订票</option> <!--:value="0" 用数据绑定的形式,则它的值是数值类型的--><option :value="1">前台兑换</option></select><div><ul><!--从store的getters中获取数据--><li v-for="item in $store.getters.filterDataList(type)" :key="item.cinemaId">{{ item.name }}</li><!-- 如果不需要传递参数()可以不写 --><!-- <li v-for="item in $store.getters.filterDataList" :key="item.cinemaId">{{ item.name }}</li> --></ul></div>
</template>
<script>
export default {data() {return {type:0}},mounted() {if (this.$store.state.datalist.length === 0) {//如果数据为空,则去触发actions的中的getDataList方法,达到获取datalist数据的目的。而this.$store.state.datalist中的数据存在内容中,其他地方需要这个数据直接从内存中取,相当于有个缓存,this.$store.dispatch("getDataList");}},
}
</script>

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

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

相关文章

二元交叉熵损失函数(Binary Cross Entropy Loss,BCELoss)是交叉熵损失函数(CrossEntropyLoss)的特殊情况

一直以来看到二元交叉熵损失函数&#xff08;Binary Cross Entropy Loss&#xff0c;BCELoss&#xff09; 还以为是很复杂的东西&#xff0c;原来其实是交叉熵损失函数&#xff08;CrossEntropyLoss&#xff09;的特殊情况&#xff0c;也就是二元交叉熵损失函数其实就是交叉熵损…

自动驾驶学习笔记(七)——感知融合

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo Beta宣讲和线下沙龙》免费报名—>传送门 文章目录 前言 感知融合 卡尔曼滤波 融合策略 实…

数据分析实战 | 线性回归——女性身高与体重数据分析

目录 一、数据集及分析对象 二、目的及分析任务 三、方法及工具 四、数据读入 五、数据理解 六、数据准备 七、模型训练 八、模型评价 九、模型调参 十、模型预测 实现回归分析类算法的Python第三方工具包比较常用的有statsmodels、statistics、scikit-learn等&#…

工业镜头接口类型

现有产品主要有以下接口 1、C:最常见的工业相机接口&#xff0c;受限于接口物理尺寸大小&#xff0c;最大靶面目前是4/3” 2、M42:M421.0,2k和4k线阵相机使用 3、M58S:M580.75,大靶面相机使用&#xff0c;可以转C(限于CH080相机&#xff0c;靶面4/3”)&#xff0c;可以转F,可以…

数据结构预算法--链表(单链表,双向链表)

1.链表 目录 1.链表 1.1链表的概念及结构 1.2 链表的分类 2.单链表的实现(不带哨兵位&#xff09; 2.1接口函数 2.2函数的实现 3.双向链表的实现&#xff08;带哨兵位&#xff09; 3.1接口函数 3.2函数的实现 1.1链表的概念及结构 概念&#xff1a;链表是一种物理存储结…

论文阅读——Detection Hub(cvpr2023)

Detection Hub: Unifying Object Detection Datasets via Query Adaptation on Language Embedding 一、要解决的问题 大规模数据集可以提高模型性能&#xff0c;但是当训练多类别单一模型时&#xff0c;大规模数据集不能用在目标检测任务上&#xff0c;因为两个困难&#xff1…

开发知识点-Ant-Design-Vue

Ant-Design-Vue a-input a-input Vue组件 a-spin 加载中的效果 data字段 mounted钩子函数 Ant Design Vue 组件库 list-type“picture-card” 上传的图片作为卡片展示 name show-upload-list action :beforeUpload“handleBeforeUpload” :headers“customHeaders” :disabl…

记录个天翼云80/8080/443端口无法访问的事

碰见这种情况&#xff0c;真鸡毛是想骂人&#xff0c;华为云、阿里云都玩过也没听说访问80/443端口要备案之后才能访问&#xff0c;没备案不能访问&#xff0c;但可以访问除80/8080/443之外的端口&#xff0c;我简直日了狗了&#xff0c;不能访问你直接挂官网提示呀&#xff0c…

C++ RBTree 理论

目录 这个性质可以总结为 红黑树的最短最长路径 红黑树的路径范围 code 结构 搞颜色 类 插入 插入逻辑 新插入节点 思考&#xff1a;2. 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏&#xff1f; 解决方法 变色 旋转变色 第三种情况&#xff0c;如果根…

Fortran 中的指针

Fortran 中的指针 指针可以看作一种数据类型 指针存储与之关联的数据的内存地址变量指针&#xff1a;指向变量数组指针&#xff1a;指向数组过程指针&#xff1a;指向函数或子程序指针状态 未定义未关联 integer, pointer::p1>null() !或者 nullify(p1) 已关联 指针操作 指…

UVCCamera的预览绘制

这个绘制跟以前的那种在底层绘制不同&#xff0c;需要手动操作。算是Camera2的特征&#xff1f; 发送产生消息 onConnect() getSurface() UVCCameraTextureView.getSurfaceTexture() RenderHandler.getPreviewTexture(): 在这里发送一个消息 处理产生消息 RenderThread.upd…

docker下的nginx代理转发到tomcat

多次尝试失败原因&#xff0c;修改nginx配置文件以后&#xff0c;需要./nginx.sh -s reload 下&#xff0c;之前一直不转发&#xff0c;好像完全没有跳转的意思&#xff0c;后来查了多篇文档&#xff0c;最简单的方法如下 docker 安装 nginx 和tomcat就不多说了&#xff0c;可…

交叉编译 mysql-connector-c

下载 mysql-connector-c $ wget https://downloads.mysql.com/archives/get/p/19/file/mysql-connector-c-6.1.5-src.tar.gz 注意&#xff1a;mysql-connector 的页面有很多版本&#xff0c;在测试过程中发现很多默认编译有问题&#xff0c;其中上面的 6.1.5 的版本呢是经过测…

4面百度软件测试工程师的面试经验总结

没有绝对的天才&#xff0c;只有持续不断的付出。对于我们每一个平凡人来说&#xff0c;改变命运只能依靠努力幸运&#xff0c;但如果你不够幸运&#xff0c;那就只能拉高努力的占比。 2023年7月&#xff0c;我有幸成为了百度的一名测试工程师&#xff0c;从外包辞职了历经100…

【h5 uniapp】 滚动 滚动条,数据跟着变化

uniapp项目 需求&#xff1a; 向下滑动时&#xff0c;数据增加&#xff0c;上方的日历标题日期也跟着变化 向上滑动时&#xff0c;上方的日历标题日期跟着变化 实现思路&#xff1a; 初次加载目前月份的数据 以及下个月的数据 this.getdate()触底加载 下个月份的数据 onReach…

CL-MVSNet论文精读

本文是对CL-MVSNet: Unsupervised Multi-View Stereo with Dual-Level Contrastive Learning Kaiqiang Xiong, Rui Peng, Zhe Zhang, Tianxing Feng, Jianbo Jiao, Feng Gao, Ronggang Wang的阅读记录 Proceedings of the IEEE/CVF International Conference on Computer Visio…

基于JavaWeb+SpringBoot+微信小程序的酒店商品配送平台系统的设计和实现

基于JavaWebSpringBoot微信小程序的酒店商品配送平台系统的设计和实现 源码传送入口前言主要技术系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码传送入口 前言 本章内容概括了基于微信小程序的酒店商品配送平台的可行性分析、系统功…

MySQL中UUID主键的优化

UUID&#xff08;Universally Unique IDentifier 通用唯一标识符&#xff09;&#xff0c;是一种常用的唯一标识符&#xff0c;在MySQL中&#xff0c;可以利用函数uuid()来生产UUID。因为UUID可以唯一标识记录&#xff0c;因此有些场景可能会用来作为表的主键&#xff0c;但直接…

ObjectArx动态加载及卸载自定义菜单

上节中我们介绍了如何制作自定义菜单即cuix文件&#xff1a;给CAD中添加自定义菜单CUIX-CSDN博客https://blog.csdn.net/qianlixiaomage/article/details/134349794在此基础上&#xff0c;我们开发时通常需要在ObjectArx程序中进行动态的添加或者删除cuix菜单。 创建ObjectArx…

浅析移动端车牌识别技术的工作原理及其过程

随着社会经济的发展与汽车的日益普及带来巨大的城市交通压力,在此背景下,智能交通系统成为解决这一问题的关键。而在提出发展无线智能交通系统后,作为智能交通的核心,车牌识别系统需要开始面对车牌识别移动化的现实需求。基于实现车牌识别移动化这一目标,一种基于Android移动终…