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

状态管理插件vuex

news 文章来源：https://blog.csdn.net/qq_52563729/article/details/129808319 2025/5/14 0:05:15

概念:

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

想转行做程序员，该怎么选择开发语言？哪个岗位工资最高？

本文主要针对零基础想了解或者转行从事开发岗的同学。我们收集了往届毕业同学和一些正在咨询的同学，发现大家在学习初期，对转行互联网做开发，最多的疑问或者顾虑大体分为几类： 现在哪门语言比较火？ 学什么语言好找到工…...

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

JavaWeb——【笔记】3.2JavaWeb_Web核心_Request(请求)+Response(响应)

Request(请求)Response(响应)两个对象 request、response是service()方法中的两个参数。作用分别是获取请求数据进行逻辑处理；对数据解析设置响应数据一、简介示例: 二、Request(请求) 1、Request继承体系能更清楚其是由谁创建及查阅什么文档 2、Request获…...

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

HTML 标签和属性

一些标签单双标签双标签。双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 </标签名> 表示，只有一对标签一起使用才能表示一个具体的含义。例如 <html>&…...

编程日记 2023/4/18 10:35:07

MySQL 连接的使用

MySQL 连接的使用在前几章节中，我们已经学会了如何在一张表中读取数据，这是相对简单的，但是在真正的应用中经常需要从多个数据表中读取数据。本章节我们将向大家介绍如何使用 MySQL 的 JOIN 在两个或多个表中查询数据。你可以在 SEL…...

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

配置案例丨EtherCAT转Profinet网关连接凯福科技总线步进驱动器

西门子S7-1200/1500系列的PLC，采用PROFINET实时以太网通讯协议，需要连接带EtherCAT的通讯功能的伺服驱动器等设备，就必须进行通讯协议转换。小疆GW-PN-ECATM系列的网关提供了，快速可行的解决方案。GW-PN-ECATM支持两种实时以太网通…...

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

VSCODE连接ssh服务器时提示could not establish connection to解决方法

VSCODE连接ssh服务器时提示could not establish connection to解决方法 1.点击扩展设置在Remote.ssh：config file中输入config路径重新连接即可，如果是之前连接过ubuntu现在无法连接则需要打开刚刚的地址文件中删掉known_hostsj即可虚拟机中ubuntu安…...

编程日记 2023/4/16 5:53:54

网络安全之防火墙双机热备实验

目录网络安全之防火墙双机热备实验实验图基本配置 PC1 SW2 PC2 编辑 SW3配置登陆防火墙图形界面编辑 FW1的配置 FW2的配置新建trust to untrust 区域的安全策略配置心跳线在FW1与FW2之间拉一条心跳线编辑配置FW1 g 1/0/2 口 ip 编辑配置FW2 g…...

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

Java高频面试题（2023最新整理）

Java的特点 Java是一门面向对象的编程语言。面向对象和面向过程的区别参考下一个问题。 Java具有平台独立性和移植性。 Java有一句口号：Write once, run anywhere，一次编写、到处运行。这也是Java的魅力所在。而实现这种特性的正是Java虚拟机JVM。已编…...

编程日记 2023/4/18 10:37:20

mongoDB学习笔记

1.大数据定义： 数据量级大 byte kb MB GB TB PB ... 数据种类多数据维度例如：人物画像数据处理速度快数据有价值问题：①.存储 ？ ②.数据分析？ ③.高并发？ 大数据应用领域: 电商（推…...

编程日记 2023/4/12 2:35:24

快速融人，融资的共享模式，实体，线上皆可参考

有一种模式现在非常流行，它既能帮助商家快速收钱，又能帮助商家快速裂变更多客户，这个神奇的模式就是共享股东模式，现在很多老板都在用这个模式。梦龙商业案例分析，带你了解商业背后的秘密这个模式也适用于很多个行…...

编程日记 2023/4/12 3:06:31

相关文章：