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

状态管理插件vuex

news 2025/10/28 23:53:40

概念:

专门在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

汽车生产虚拟实训中的技能提升与生产优化

在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...

编程新知 2025/10/16 1:32:29

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r，求圆的面积。圆的面积应精确到小数点后5位。例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。输…...

编程新知 2025/10/24 16:04:24

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群一、主从架构的不足与Dledger的定位主从架构缺陷数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。其核心目标是避免复杂和过度设计，遵循“让事情保…...

编程新知 2025/10/24 9:52:19

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘一、系统概述本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/10/27 3:10:54

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。核心区别：不同层级的事件处理方…...

编程新知 2025/6/10 21:19:52

【SpringBoot自动化部署】

SpringBoot自动化部署方法使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一，能够实现代码拉取、构建、测试和部署的全流程自动化。配置Jenkins任务时，需要添加Git仓库地址和凭证，设置构建触发器（如GitHub…...

编程新知 2025/10/20 7:16:42

相关文章：