当前位置：首页 > news >正文

状态管理插件vuex

news 2025/9/12 19:54:51

概念:

专门在Vue中实现集中式状态(数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。

作用：

如果我们使用全局总线要让所有的组件进行修改就会引出这么多条线：

在这里插入图片描述

如果使用vuex，这个x就不属于任何组件

在这里插入图片描述

什么时候使用Vuex——————共享

1.多个组件依赖于同一状态

⒉.来自不同组件的行为需要变更同一状态

vuex工作原理：

如果不发送ajax请求可以忽略actions这条线，直接去mutations，actions中放业务逻辑，有判断的时候进行操作

引入的坑

在这里插入图片描述

映入会提前，str2会在100和200之前输出

1.我们应该在main.js中引入store 在这里插入图片描述

2.在store中的index中引入vuex

在这里插入图片描述

错误的引入方式

在这里插入图片描述
我们vuex和store在同一个文件进行引入！！！这么做是错误的，因为第十行一写，第十行里面的代码就执行完了，也就是下面这些代码被执行完了：

在这里插入图片描述

但是在执行当中创建了store实例，但是我们还没有执行下面这个代码在这里插入图片描述

会造成顺序错误

不要忘记将store配置到vue中

在这里插入图片描述

2.组件中读取vuex中的数据:$store.state.sum
3.组件中修改vuex中的数据:$store.dispatch('action中的方法名' ,数据)或$store.commit( 'mutations中的方法名',数据)

写一个加的案例

组件中

在这里插入图片描述

store中

在这里插入图片描述
1.mutation中只进行加减，不要放任何业务逻辑。

2.context是一个迷你版的store，commit函数就在这个上下文对象里，提交给后面的函数运行

如果业务逻辑很简单，没有判断等等，那么我们就不需要dispath，直接commit！

在这里插入图片描述

那么我们可以将下面红色框的东西删除！！

在这里插入图片描述

如果业务逻辑很多可以这样连环使用

在这里插入图片描述

注意点

1：不要直接在action里面操作state里面的数据

在这里插入图片描述
这么写虽然会实现效果，但是开发者工具失效了，因为通过图片我们可以知道我们的开发者工具是跟mutations直接对话的！！

在这里插入图片描述

2.可不可以不把逻辑写在actions里面，直接写在组件的方法里面呢？

在这里插入图片描述
如果逻辑很大，比如说发票真伪判断。假如说我们写在方法里面，我们所有的组件自身都需要一个真伪判断，如果我们抽象到actions里面，那么就只需要一个判断方法，提高复用性。

getters配置项

1.概念:当state中的数据需要经过加工后再使用时，可以使用getters加工。

2.在store.js中追加getters配置

在这里插入图片描述

3.组件中读取数据:$store.getters.bigSum

在这里插入图片描述

mapSate 与map.Getters

1.借助mapState生成计算属性,从state中读取数据

在这里插入图片描述
我们的$store.state.sum 有点长，如果我们只需要显示sum就能代表这一堆东西那么我们该怎么办？

计算属性可以解决这个问题：
在这里插入图片描述

这里我们的he就可以代表我们的$store.state.sum，那如果有一堆这样的东西，是不是我们需要把我们所有的都配置成计算属性呢？

我们就需要使用到我们的mapSate

在这里插入图片描述

红色框里面的东西等价于外面粉色框的计算属性。

如果计算属性名和我们state中的名字是一样的，那么我们可以写成简写形式：

在这里插入图片描述

千万不能省略引号！！

如果没有引号就是sum：sum，就会导致后面的解析错误！！！因为没有后面那个sum变量，前面能省略引号是因为我们的js中的简写，所以我们简写的时候必须要加上引号

2.mapGetters

引入
在这里插入图片描述

例子

在这里插入图片描述

mapActions与mapMutations

mapMutations使用：借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)

修改第一个地方，这个地方的参数一定不能省去，不加参数就会报数。
在这里插入图片描述

上面红色框代码等价于绿色框代码

在这里插入图片描述

mapActions

在这里插入图片描述
使用的地方记得传入参数

在这里插入图片描述

多组件共享数据

向state里面加数据

1.设置一个点击事件

在这里插入图片描述

我们存数据可以直接走mutations这条线！！

2.配置mutations里面的方法，在state里面配置一个列表，是可以共享的属性

在这里插入图片描述

3.在person的methods中放入add点击事件的方法，然后关联到mutations里面的方法ADD_PERSON,名字不要错！

在这里插入图片描述

vuex的模块化编码

1.目的:让代码更好维护，让多种数据分类更加明确。

在这里插入图片描述

2.修改store.js

在这里插入图片描述

3.开启命名空间后，组件中读取state数据:
在这里插入图片描述

4.开启命名空间后，组件中读取getters数据:

在这里插入图片描述

5.开启命名空间后,组件中调用dispatch
在这里插入图片描述
6.开启命名空间后,组件中调用commit

状态管理插件vuex

概念: 专门在Vue中实现集中式状态(数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。作用： 如果我们使用全局总线要让所有的组件…...

编程日记 2023/4/15 16:20:09

arthas—阿里开源的Java诊断工具

一、arthas简述Arthas 是阿里开源的Java诊断工具。安装在系统所在服务器，有着强大的能力，是一个开发运维神器。主要功能在线热替换代码/代码增强全局视角的性能分析查看方法执行情况，帮助跟踪偶现的bug支持JDK6二、官方资料官方文档的介绍非常…...

编程日记 2023/4/1 5:23:18

Java学习记录

阅读前请看一下：我是一个热衷于记录的人，每次写博客会反复研读，尽量不断提升博客质量。文章设置为仅粉丝可见，是因为写博客确实花了不少精力。希望互相进步谢谢！！ 文章目录阅读前请看一下：我是一…...

编程日记 2023/4/13 17:32:40

OpenGL API 之 glVertexAttribPointer

glVertexAttribPointer 定义通用顶点属性数据的数组 C Specification format void glVertexAttribPointer(GLuint index,GLint size,GLenum type,GLboolean normalized,GLsizei stride,const void * pointer); Parameters nametypedescriptionindexGLuint Specifies the inde…...

编程日记 2023/4/18 10:28:47

蓝桥杯真题4

[蓝桥杯 2017 省 AB] 分巧克力题目描述儿童节那天有 KKK 位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。小明一共有 NNN 块巧克力，其中第 iii 块是 HiWiH_i \times W_iHiWi 的方格组成的长方形。为了公平起见，小明需要从这 NN…...

编程日记 2023/4/18 10:29:43

day02_基本语法

今日内容上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记Java2307_沐沐霸的博客-CSDN博客零、复习昨日一、程序&Java介绍二、安装JDK&配置环境变量三、DOS命令四、第一个程序[重点] 五、Java语言规范[重点] 六、运行机制七、Typora工具使用附录:…...

编程日记 2023/4/19 15:11:53

多线程之单例模式

前言本篇介绍的是wait与notify方法，通过wait来顺序控制执行一些代码，了解单例模式，进行单例模式的简单实现，介绍饿汉模式下出现线程不安全的问题与解决；如有错误，请在评论区指正，让我们一起交…...

编程日记 2023/4/15 16:21:05

2023年绿色建筑国际会议(ICoGB 2023) | Springer独立出版

会议简介 Brief Introduction 2023年绿色建筑国际会议(ICoGB 2023) 会议时间：2023年5月21日-23日召开地点：瑞典斯德哥尔摩大会官网：www.icogb.org 2023年绿色建筑国际会议(ICoGB 2023)将围绕“绿色建筑”的最新研究领域而展开，为…...

编程日记 2023/4/14 8:15:28

Python中进程和线程到底有什么区别？

人生苦短，我用python python 安装包资料:点击此处跳转文末名片获取一、进程和线程的关系线程与进程的区别可以归纳为以下4点： 地址空间和其它资源（如打开文件）：进程间相互独立，同一进程的各线程间共享。…...

编程日记 2023/4/15 16:23:03

2023美赛春季赛F题思路数据代码论文分享

文章目录赛题思路赛题详情参赛建议（个人见解）选择队友及任务分配问题（重要程度：5星）2023美赛春季赛F题思路数据代码【最新】赛题思路 (赛题出来以后第一时间在CSDN分享) 最新进度在文章最下方卡片，加入获取…...

编程日记 2023/4/16 5:49:39

念一句咒语 AI 就帮我写一个应用，我人麻了...

原文链接：https://forum.laf.run/d/232 作为人类，我们时常会有自己独特的想法和脑洞大开的创意。然而，这些想法往往因为成本过高而无法实现，毕竟每个人的能力和精力都是有限的，尤其是对于程序员而言，不可能…...

编程日记 2023/4/16 5:50:26

开放平台设计之接口签名认证

前言当前时代，数据是王道！当我们自己的平台有了足够大的数据量，就有可能诞生一个开放平台宫第三方分析、使用。那么我们怎么去实现对外部调用接口的控制与鉴权呢？这是我们今天的重点——接口签名认证！！&a…...

编程日记 2023/4/13 17:33:58

Vue自创插件发布到npm以及使用方法

Vue自创插件发布到npm以及使用方法目标：创建my-popup-selector下拉框组件，并发布到npm，效果如下图： 禁用时样式： ①创建vue项目： my-popup-selector ②项目目录结构截图如下： ③在项目根目录…...

编程日记 2023/4/12 3:08:47

合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测等实践技术

合成孔径雷达干涉测量（Interferometric Synthetic Aperture Radar, InSAR）技术作为一种新兴的主动式微波遥感技术，凭借其可以穿过大气层，全天时、全天候获取监测目标的形变信息等特性，已在地表形变监测、DEM生成、滑坡…...

编程日记 2023/4/18 10:30:54

Java刷题，蓝桥杯省赛第十二届（第一场）4-------------6

4、相乘题目本题总分：10 分【问题描述】小蓝发现，他将 1 至 1000000007 之间的不同的数与 2021 相乘后再求除以1000000007 的余数，会得到不同的数。小蓝想知道，能不能在 1 至 1000000007 之间找到一个数，与 2021 相乘后…...

编程日记 2023/4/12 3:08:34

Docker Cgroups——Docker 资源限制背后的技术原理

Docker Cgroups——Docker 资源限制背后的技术原理虽然在容器内部进程只能看到“掩饰”过的视图，但是在宿主机上，它就是一个普通的进程，与其他所有进程之间是平等竞争的关系。这就意味着虽然表面上被隔离了，但它实际上在与其他进程…...

编程日记 2023/4/18 10:32:05

十四. MySQL 锁相关

目录一. MySQL 锁基础Mysql 锁分类二. InnoDB 下的锁增删改查操作时底层的加锁处理表级锁1. 意向锁2. AUTO-INC锁id不连续对主从同步的影响3. 其它表锁行锁分析1. 记录锁 Record Locks2. 间隙锁 Gap Locks3. 临键锁 Next-Key Locks4. 插入意向锁5. 隐式锁6. 加锁算法InnoDB 行锁…...

编程日记 2023/4/18 10:34:36

ModStartBlog v7.0.0 网站简单统计，支持博客分享

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用，支持后台一键快速安装，让开发者能快的实现业务功能开发。系统完全开源，基于 Apache 2.0 开源协议。功能特性丰富的模块市场，后台一键快速安装 …...

编程日记 2023/4/14 8:17:00

【C语言蓝桥杯每日一题】—— 递增序列

【C语言蓝桥杯每日一题】—— 递增序列😎前言🙌递增序列🙌总结撒花💞😎博客昵称：博客小梦 😊最喜欢的座右铭：全神贯注的上吧！！！ 😊作者…...

编程日记 2023/4/13 17:36:32

node_express框架01

01_express 基本结构注意点：app.get 指定了 get 方法，如果是 app.all 就是指定了所有的请求方法（例如：post delete 都是包含的），而 app.get(/) 里面访问的是根路径，如果访问别的路径&#xff…...

编程日记 2023/4/12 3:07:59

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/8/5 5:52:21

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。一、useAsyncError 用途处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/9/1 12:53:45

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2025/7/5 11:03:11

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...

编程新知 2025/7/30 18:28:44

java 实现excel文件转pdf | 无水印 | 无限制

文章目录目录文章目录前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件总结前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/10 13:55:45

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/8/10 22:32:47

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2025/9/2 17:47:40

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/8/16 15:34:02

相关文章：