vue【vuex状态管理】

news2024/10/6 0:31:12

1:vuex是什么:

vuex是一个状态管理工具,状态就是指的数据,可以将数据存放到vuex中以供其他组件使用时进行调用

2:应用场景:

①:像用户登录客户端,这个用户的数据需要在多个组件中进行使用,我们就可以将用户的信息存放到vuex中供多个组件去使用;

②:像用户买东西的购物车,可能在衣服的页面添加了几个衣服,在化妆品页面添加了几个化妆品,这些都是多个组件在操作购物车的数据,这时将购物车的数据放到vuex中去处理就可以供多个组件操作

3:优势:

①共同维护一份数据,数据集中管理

②响应式变化(当在一个组件中操作了vuex中的A数据,其他组件使用到的A数据会即可进行更新)

③操作简洁(vuex提供了一些辅助函数)

4:安装vuex(备注:如果使用vuecli脚手架搭建可直接配置vuex)

第一步:安装vuex

第二步:创建store文件夹,在该文件夹中创建index.js文件存放数据

第三步:main.js文件中挂载vuex

第四步:检验是否安装成功

5:如何提供数据到vuex中

6:如何调用vuex中的数据

①:通过store直接访问

模板中:{{$store.state.xxx}}

组件逻辑中:this.$store.state.xxx

JS模块中:store.state.xxx

②:mapState通过辅助函数获取数据

7:通过mutations进行修改vuex中的数据

直接进行操作vuex中的数据写法是不正确的。但是可以操作成功,可以在vuex中开启严格模式报错提示

mutations传参

代码示例:

注意:传递参数有且只有一个,如果有需要业务场景需要传递多个参数封装成对象

8:辅助函数:mapMutations,映射vuex中的方法

提示:使用mapMutations将vuex中的方法解构到组件的方法区中

代码示例:

9:异步操作 actions

大部分场景是发送请求

操作流程:在vuex中编写actions区域,在该区域中编写方法,在方法中调用vuex中的mutations区域

内的方法操作state区域内的数据,页面组件调用actions区域内的dispatch方法操作该区域内的函数

在组件中调用vuex中actions区域内的方法示例:

10:mapActions 获取vuex中actions里面的方法

11:操作state里面的数据(getters)将getters里面的方法映射出来辅助函数(mapGetters)映射属性(获取属性数据)

代码示例:两种方式

注意事项:

1:getters函数的第一个参数是state

2:getters函数必须要有返回值

12:vuex模块拆分(modules)

1:作用:

为什么要vuex要分模块处理:因为一个项目用到vuex地方很多当所有的属性都集中在一个文件中维护起来比较麻烦,分为指定模块更加清晰直观易于维护

第一步:在store下创建modules文件夹,创建模块js文件

第二步在创建仓库中进行注册

2:实现步骤:

第一步在store文件夹下面加了一个modules文件夹,在该文件夹里面加了settings.js和user.js文件,

意思就是有两个子模块分别是user模块和settings模块

第二步在user.js和settings.js文件中添加存储数据

第三步在index.js文件中导入这两个文件,并且声明这两个文件

第四步可以在浏览器中查看根节点是否成功挂载两个子模块

3:如何访问子模块中数据

虽然将vuex中的数据分模块管理了,但是子模块的数据还是会挂载到根级别的state中,属性名就是模块名

3.1:纯原生的方式

格式:$store.state.index.js文件中导入子模块的名称.子模块中属性名

3.2:通过mapState辅助函数

第一种:默认根级别的映射mapState(['xxx'])

第二种:子模块的映射mapState('模块名',['xxx'])- 需要开启命名空间

一定要配置命名控制不然会报错

4:如何访问子模块中getters中的数据

4.1:纯原生的方式

直接通过模块名访问 $store.getters['模块名/xxx']

代码示例:

4.2:通过使用mapGetters辅助函数映射

格式:

子模块的映射mapGetters('模块名',['xxx']) - 需要开启命名空间

代码示例:

5:如何访问子模块中mutation中的方法

方式一:直接通过store调用

$store.commit('模块名/xxx',额外参数)

代码示例:

方式二:通过mapMutations映射

6:如何访问子模块中的actions异步方法

方式一:直接通过store调用

方式二:通过辅助函数mapActions映射

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

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

相关文章

VUE3 ref,props,生命周期

1.--ref属性 1.1代码 1.1.1子表 <template><div class"person"><h1>中国</h1><h2 ref"title2">北京</h2><h3>尚硅谷</h3><button click"showLog">点我输出h2这个元素</button>&l…

每天五分钟计算机视觉:基于YOLO算法精确分类定位图片中的对象

滑动窗口的卷积的问题 滑动窗口的卷积实现效率很高,但是它依然不能够输出最精准的边界框,比如下面所示: 我们可以看到蓝色框不论在什么位置都不能很好的确定车的位置,有一个算法是YOLO 算法它能够帮助我们解决这个问题。 YOLO 算法 比如我们的输入图像是100*100,我们会…

【网络安全】对称加密、非对称加密以及密钥分配

目录 1、对称加密 2、非对称加密 3、如何分配对称密钥&#xff1f; 4、如何分配非对称密钥&#xff1f; 1、对称加密 所谓对称加密&#xff0c;就是指加密密钥与解密密钥都使用相同的密钥。如下图所示&#xff0c;通信双方使用的就是对称加密密钥。//代表&#xff1a;DES和…

Hive服务详解

Hive服务 HiveServer2、Hive Metastore 服务服务共同构成了 Hive 生态系统中的核心功能&#xff0c;分别负责管理元数据和提供数据查询服务&#xff0c;为用户提供了一个方便、高效的方式来访问和操作存储在 Hive 中的数据。 1. Hive 查询服务&#xff08;HiveServer2&#xf…

恶补《操作系统》2_1——王道学习笔记

2操作系统-进程 2.1_1 进程的定义、组成、组织方式、特征 组成&#xff1a;PCB&#xff08;进程存在唯一的标志&#xff09;&#xff0c;程序段&#xff0c;数据段 组织方式&#xff1a;链接方式&#xff0c;指针指向不同的队列&#xff1b;索引方式&#xff0c;索引表 特征…

【深度学习】yolo-World,数据标注,zeroshot,目标检测

仓库&#xff1a;https://github.com/AILab-CVC/YOLO-World 下载权重&#xff1a; 仓库下载和环境设置 下载仓库&#xff1a;使用以下命令从 GitHub 上克隆仓库&#xff1a; git clone --recursive https://github.com/AILab-CVC/YOLO-World.git创建并激活环境&#xff1a…

VMmark 4 - 虚拟化平台基准测试

VMmark 4 - 虚拟化平台基准测试 VMmark is a free tool used to measure the performance and scalability of virtualization platforms. 请访问原文链接&#xff1a;VMmark 4 - 虚拟化平台基准测试&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页…

GPT与GAN结合生成图像——VQGAN原理解析

1、前言 这篇文章&#xff0c;我们讲VQ_GAN&#xff0c;这是一个将特征向量离散化的模型&#xff0c;其效果相当不错&#xff0c;搭配Transformer&#xff08;GPT&#xff09;或者CLIP使用&#xff0c;达到的效果在当时可谓是令人拍案叫绝&#xff01; 原论文&#xff1a;Tam…

栈和队列-介绍与实现(超级!!!详解-C语言)

目录 栈 栈的介绍 栈的概念 栈的结构 栈的实现 初始化栈 StackInit 销毁栈 StackDestroy 入栈 StackPush 出栈 StackPop 获取栈顶元素 StackTop 检查栈是否为空 StackEmpty 获取栈中有效元素个数 StackSize 队列 队列的介绍 队列的概念 队列的结构 队列的应用 队列的实现 …

LabVIEW与Modbus协议的多点温度监控系统

LabVIEW与Modbus协议的多点温度监控系统 随着工业自动化和智能化水平的不断提升&#xff0c;对于现场监控技术的需求日益增长。开发了一种基于LabVIEW与Modbus协议的多点温度监控系统&#xff0c;实现高效、准确的温度数据采集、处理和显示&#xff0c;以及数据存储功能&#…

【IR 论文】Google 对通过 prompt LLM 做 Query Expansion 的工作

论文&#xff1a;Query Expansion by Prompting Large Language Models ⭐⭐⭐ Google Research, arxiv:2305.03653 论文速读 之前我在论文笔记 Query2doc 中介绍了信息检索&#xff08;IR&#xff09;以及 Query Expansion 的相关背景知识。 本篇文章是 Google 发表的关于对…

Maven:配置与使用指南1

https://mvnrepository.com Maven 1.maven简介 不同模块的jar包以及同时设计的功能的微小变化版本&#xff1b; 真实的开发环境&#xff1a;我们将我们的源代码在服务器上重新编译重新打包&#xff0c;工程升级维护过程繁琐 1.Maven是一个项目管理工具&#xff0c;将项目开…

SpringBoot xxl-job 任务调度

首先官网下载xxl-job的源代码&#xff0c;然后切换到jdk8&#xff0c;等Maven下载依赖 执行mysql的脚本&#xff0c;修改连接配置&#xff0c;启动admin站点 默认地址 http://localhost:8080/xxl-job-admin/ 先新增一个任务执行器&#xff0c;指向未来任务代码的站点 然后在…

数学建模完整版

模型与适用题型 微分方程传染病预测模型 神经网络 层次分析法 粒子群算法 matlab 优劣解距离法

计算机组成原理—数据的表示和运算

二进制&#xff1a;2进1 八进制里的1位对应二进制里的三位 重点&#xff1a;转换为10进制

git常见命令(成长版)

ps&#xff1a;所谓成长版就是后续可能还会添加命令&#xff1a; 1.删除本地分支&#xff1a; git branch -d 分支名 2.拉取代码后默认master分支&#xff0c;切换到线上其他分支&#xff1a; &#xff08;1&#xff09;查看线上所有分支&#xff1a; git branch -a &#…

比特币之路:技术突破、创新思维与领军人物

比特币的兴起是一段充满技术突破、创新思维和领军人物的传奇之路。在这篇文章中&#xff0c;我们将探讨比特币发展的历程&#xff0c;以及那些在这一过程中发挥重要作用的关键人物。 技术突破与前奏 比特币的诞生并非凭空而来&#xff0c;而是建立在先前的技术储备之上。在密码…

贪心算法-活动安排问题和背包问题

实验6贪心算法-活动安排问题和背包问题 实验目的&#xff1a; 理解贪心算法的基本思想运用贪心算法解决实际问题 实验内容&#xff1a; 采用贪心方法编程实现以下问题的算法 1.如何安排下列活动使得使用的活动场所最少&#xff0c;并给出具体的安排方法。 活动 a b c …

全新Storm Core API管理系统源码 免授权版

全新Storm Core API管理系统源码 免授权版 本系统为API系统,实现了api集成等基础功能,以后可能会更新key调用api,或者实现付费功能,敬请期待,前端模板均无加密,用户可自行二开,具体请看图 测试环境:PHP7.2+MySQL5.6 访问:http://你的域名/install 进行安装 伪静态…

AIGC实战——基于Transformer实现音乐生成

AIGC实战——基于Transformer实现音乐生成 0. 前言1. 音乐生成的挑战2. MuseNet3. 音乐数据3.1 巴赫大提琴组曲数据集3.2 解析 MIDI 文件3.3 分词3.4 创建训练数据集 4. MuseNet 模型4.1 正弦位置编码4.2 多输入/输出 5. 音乐生成 Transformer 的分析6. 多声部音乐分词6.1 网格…