vue【vuex状态管理】

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://xiahunao.cn/news/2979556.html

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

相关文章

一维递归:递去

示例&#xff1a; /*** brief how about recursive-forward-1? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>…

Linux多进程(一)创建进程与进程控制

一、进程状态 进程一共有五种状态分别为&#xff1a;创建态&#xff0c;就绪态&#xff0c;运行态&#xff0c;阻塞态(挂起态)&#xff0c;退出态(终止态)其中创建态和退出态维持的时间是非常短的&#xff0c;稍纵即逝。主要是就绪态, 运行态, 挂起态三者之间的状态切换。 就绪…

ABB机器人IRB4400平衡缸维修小技巧

ABB平衡缸是机器人是一个不可忽视的重要组成部分。ABB机器人平衡缸通常采用高强度材料制造&#xff0c;设计精巧&#xff0c;方便地集成到IRB4400机器人手臂中。此外&#xff0c;平衡缸还具备良好的密封性能&#xff0c;防止气体或液体泄漏&#xff0c;确保其耐用性和稳定性。因…

Mac电脑清理微信聊天记录 Mac电脑微信缓存怎么删

细心网友突然发现微信已经成为占用电脑存储空间最大的软件&#xff0c;其中包括聊天记录、缓存的文件、图片、视频等等&#xff0c;少则几个G&#xff0c;多则十几个G&#xff0c;让原本就不富裕的Mac存储空间更是雪上加霜。mac电脑清理微信聊天记录成为大家迫切解决的问题&…

MySQL文件目录结构:表在文件系统中的表示

以下内容基于Linux系统&#xff0c;MySQL的 /var/lib/mysql/ 目录下的数据文件 &#x1f496; Innodb 引擎 MySQL 5.7 MySQL 8.0 &#x1f31f; 总结 Innodb 是聚簇索引&#xff0c;索引及数据&#xff0c;数据即索引&#xff0c;所以数据和索引是存储在同一个文件中的 MyS…

Java基本语法(基础部分)

Java基本语法 文章目录 Java基本语法前言一、准备工作1.1 计算机软件与硬件1.2 计算机编程语言1.3 Java语言概述&程序分析1.4 Java环境搭建&Java API1.5 Java核心机制JVM 二、变量2.1 关键字&标识符2.2 变量2.3 数据类型(基本数据类型)2.3.1 基本数据类型2.3.2 基本…

【八股文】Spring 谈谈你对AOP的理解

AOP AOP(Aspect-Oriented Programming&#xff0c;面向切面编程)&#xff1a;是一种新的方法论&#xff0c;是对传统 OOP(Object-Oriented Programming&#xff0c;面向对象编程)的补充。 面向对象是纵向继承&#xff0c;面向切面是横向抽取。 OOP思想是一种垂直纵向的继承体…

HARDVS: Revisiting Human Activity Recognition with Dynamic Vision Sensors

标题&#xff1a;HARDVS: 用动态视觉传感器重新审视人类行为识别 原文链接&#xff1a;HARDVS: Revisiting Human Activity Recognition with Dynamic Vision Sensors| Proceedings of the AAAI Conference on Artificial Intelligencehttps://ojs.aaai.org/index.php/AAAI/ar…

PHP 爬虫如何配置代理 IP(CURL 函数)

在 PHP中 配置代理IP&#xff0c;可以通过设置 CURL 库的选项来实现&#xff0c;代码如下&#xff1a; 当然你要有代理ip来源&#xff0c;比如我用的这个 代理商 &#xff0c;如果想服务稳定不建议找开源代理池&#xff0c;避免被劫持。 <?php // 初始化cURL会话 $ch cu…

数据分析师必备的8个思维框架

什么是框架性思维&#xff1f;它是由一个个的思维框架积累而来。本文介绍分析常用的几个思维框架。 一些职位描述中会要求分析师有框架性思维&#xff0c;能够被考察的是思维框架&#xff0c;通过思维框架判断框架性思维能力。笔者查阅了多篇文章&#xff0c;定义思维框架为&a…

文件上传漏洞-白名单检测

如何确认是否是白名单检测 上传一张图片与上传一个自己构造的后缀&#xff0c;如果只能上传图片不能上传其它后缀文件&#xff0c;说明是白名单检测。 绕过技巧 可以利用 00 截断的方式进行绕过&#xff0c;包括 %00 截断与 0x00 截断。除此之外如果网站存在文件包含漏洞&…

统一SQL 支持Oracle unpivot列转行

统一SQL介绍 https://www.light-pg.com/docs/LTSQL/current/index.html 源和目标 源数据库&#xff1a;Oracle 目标数据库&#xff1a;TDSQL-MySQL 操作目标 在Oracle中&#xff0c;可以使用unpivot将列转换成行&#xff0c;在TDSQL-MySQL中没有对应的功能&#xff0c;由…

面试官竟然是个小黑子,问我用过状态机吗

状态机的组成 状态机是一种抽象的数学模型&#xff0c;描述了对象或系统在特定时间点可能处于的各种状态以及状态之间的转换规则。它由一组状态、事件、转移和动作组成&#xff0c;用于模拟对象在不同条件下的行为和状态变化。 状态机包括以下基本组成部分&#xff1a; 状态&…

【IR 论文】Query2doc — 使用 LLM 做 Query Expansion 来提高信息检索能力

论文&#xff1a;Query2doc: Query Expansion with Large Language Models ⭐⭐⭐⭐⭐ Microsoft Research, EMNLP 2023 文章目录 背景介绍Query2doc 论文速读实现细节实验结果和分析总结分析 背景介绍 信息检索&#xff08;Information Retrieval&#xff0c;IR&#xff09;指…

数据清洗:异常值检测方法

异常值检测方法总结 一、基于分布1、3σ原则2、Z_score方法3、boxplot一、基于分布 1、3σ原则 3σ原则又称为拉依达法则。该法则就是先假设一组检测数据只含有随机误差,对原始数据进行计算处理得到标准差,然后按一定的概率确定一个区间,认为误差超过这个区间的就属于异常…

使用 IPAM 解决方案简化分布式网络管理

随着组织在数字领域的全球扩张&#xff0c;分布式网络是不可避免的&#xff0c;这意味着&#xff0c;随着 IT 基础设施的发展&#xff0c;组织需要适应&#xff0c;这包括在不断增长的系统需求、应用程序堆栈、各种协议和安全防御中监控、现代化和简化流程和资源。在有效管理现…

【Java框架】SpringBoot(二)核心配置

目录 yml文件什么是yml文件yml文件的优点使用场景脚本语言序列化配置文件 yml的基本语法yml支持的数据类型字面量对象(属性和值)、Map(键值对)数组复合结构 Spring Boot配置文件的值注入第一种读取方式Value第二种读取方式ConfigurationProperties第三种读取方式自动装配Enviro…

【大模型书籍】从零开始大模型开发与微调:基于PyTorch与ChatGLM(附PDF)

哈喽各位&#xff0c;今天又来给大家分享大模型学习书籍了&#xff0c;今天是这本<从零开始大模型开发与微调&#xff1a;基于PyTorch与ChatGLM 书籍PDF分享>&#xff0c;大模型是深度学习自然语言处理皇冠上的一颗明珠&#xff0c;也是当前AI和NLP研究与产业中最重要的方…

Pushmall智能AI数字名片— —寻求商机合作的营销推广平台

Pushmall智能AI数字名片— —寻求商机合作的营销推广平台 开发计划 2024年2月开发计划&#xff1a; 1、优化名片注册、信息完善业务流程&#xff1b; 2、重构商机信息&#xff1a;供应信息、需求信息发布。 3、会员名片服务优化 4、企业名片&#xff1a;员工管理优化 5、CRM客…

Linux之 USB驱动框架-USB总线(2)

一、linux 下&#xff0c;通过系统查看usb 总线 ls /sys/bus/usb/devices/也包含了很多信息&#xff1a; 其中usb1、usb2代表系统注册了2条usb总线&#xff0c;即有2个USB主机控制器&#xff0c;1和2用于区分不同总线&#xff0c;是USB的总线号。 每插入一个usb设备&#xff…