VueX介绍和工作原理

news2024/11/29 20:29:47

一、VueX的作用

VueX就是在Vue中专门集中地管理数据的一个Vue插件。

在VueX中的数据不属于任何一个组件,所有的组价都可以访问和修改这个数据。

因此,当我们的多个组件依赖同一个状态(如用户信息)时,就可以使用VueX。

二、VueX的原理

VueX的工作原理可以用下面这张图来进行解释:

1.State

所有管理的数据都存放在VueX的State对象中。

通过render函数就可以将State中的数据渲染到Vue Components中。

2. Actions

用户所有对数据的操作都是在Vue Components中进行的,这时候就会有操作的"行为"和"数据"。

比如:用户点击了一下按钮,number+1,这里的+操作就是行为,number就是数据。

Vue Components通过pispatch方法将行为和数据传递给Actions对象。

Actions对象中存放着一系列的行为函数,就可以根据Vue Components传递过来的行为找到与之对应的函数。

3. Mutations

Actions在对应的行为函数中再调用commit方法将行为和数据传递给Mutations对象。

Mutation对象中存着所有的行为和数据,找到与之对应的行为函数,将数据和State中的数据进行相应的操作。

处理完成的数据又通过mutate函数存入State中。

4. Store

Store在图像中并未体现出来,下图中所有红色框住的部分都是Store的组成部分。

因此,我们在调用方法的时候就是在调用Store中的方法,如:Store.dispatch,Store.Mutations

5. 补充 

在上面Actions的介绍中,Actions显得很多余。

其实很多时候我们可以直接使用如下蓝色的这条线:

那我们在什么情况下要使用Actions对象?

当我们处理的数据需要通过后台API返回的数据进行处理的时候就要使用到Actions对象。 

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

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

相关文章

【Tomcat Servlet】如何在idea上部署一个maven项目?

目录 1.创建项目 2.引入依赖 3.创建目录 4.编写代码 5.打包程序 6.部署项目 7.验证程序 什么是Tomcat和Servlet? 以idea2019为例: 1.创建项目 1.1 首先创建maven项目 1.2 项目名称 2.引入依赖 2.1 网址输入mvnrepository.com进入maven中央仓库->地址…

Docker 学习路线 9:运行容器

要启动一个新的容器,我们使用 docker run 命令,后跟镜像名称。基本语法如下: docker run [选项] 镜像 [COMMAND] [ARG...] 例如,要运行官方的 Nginx 镜像,我们可以使用: docker run -d -p 8080:80 nginx…

Qt5 安装 phonon

Qt5 安装 phonon Qt5 安装 phonon问题描述安装组件 Qt5 安装 phonon 开发环境:Qt Creator 4.6.2 Based on Qt 5.9.6 问题描述 在运行 Qt5 项目时,显示错误: error: Unknown module(s) in QT: phonon这是缺少组件的原因,QT: pho…

MTK联发科天玑9000旗舰5G移动平台处理器_MT6983芯片定制开发

MT6983天玑9000采用台积电4纳米工艺制程,CPU采用“134”三丛集Armv9架构,APU性能提升,ISP处理速度提升,最高支持3.2亿像素摄像头,采用Mali-G710十核GPU,搭载R16 5G调制解调器。 MT6983天玑9000芯片基本概…

吴恩达《机器学习》4-1->4-5:多变量线性回归

一、引入多维特征 在多维特征中,我们考虑的不再是单一的特征,而是一组特征,例如房价模型中可能包括房间数、楼层等多个特征。这些特征将组成一个向量,表示为(𝑥₁, 𝑥₂, . . . , 𝑥ₙ)&#x…

英语教育目标转变:更加注重实际应用能力培养

今年九月份,北京市教委发布了《关于深入推进高中阶段学校考试招生改革的实施意见》。按照该意见,北京市2024年初三年级学生的初中学业水平考试英语科目听力口语考试与笔试将分离,首次计算机考试将于2023年12月17日进行。 根据《意见》规定,听力口语计算机考试共有两次考试机会…

c++ 实现二叉搜索树

二叉搜索树的概念 二叉搜索树 (BST,Binary Search Tree),也称二叉排序树或二叉查找树。它要么是一颗空树,要么是满足以下性质的二叉树: 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值。若它的右子树不为…

css图片保持比例and图片占满整个div

一、非背景图 ①保持宽度固定 img { width: 200px; height: auto; } ②保持高度固定 img { height: 300px; width: auto; } ③保持比例 /* 比例不变 */ img { max-width: 100%; height: auto; } /* 垂直居中 */ img { max-width: 100%; height: auto; display: block; margin:…

都2023年了,不会还有人不会设计软件测试用例叭?不会吧不会吧

一、概念 测试用例的基本概念: 测试用例(Test Case)是为了实施测试而向被测试的系统提供的一组集合,这组集合包含:测试环境、操作步骤、测试数据、预期结果等要素 。 主要步骤: 测试环境——测试步骤—…

有关YOLOV5在测试时,图片大小被调整的问题

执行detect.py文件,在运行栏中出现以下: detect: weightsyolov5s.pt, sourcedata\images, datadata\coco128.yaml, imgsz[640, 640], conf_thres0.25, iou_thres0.45, max_det1000, device, view_imgFalse, save_txtFalse, save_confFalse, save_cropFa…

JDK 新特性深度分析,但我用Java 8

官方文档链接:https://openjdk.org/projects/jdk/21/ 下载链接:https://www.oracle.com/cn/java/technologies/downloads/#jdk21-windows 1、介绍 JDK21 是2023.09.19发布的正式版 其他版本的含义: Alpha:软件或系统的内部测试版…

SpringBoot源码透彻解析—自动装配

花点时间找到程序入口: 整个自动装配的流程总结如下: bean工厂后置处理器(ConfigurationClassPostProcessor) 扫描spring.factories和spring-autoconfigure-metadata.properties两个文件,将文件中的自动装配类信息抽象成Con…

Kubernetes-网络插件

目录 一、flannel网络插件 二、calico网络插件 1、部署 2、网络策略 (1)限制pod流量 (2)限制namespace流量 (3)同时限制namespace和pod (4)限制集群外部流量 一、flannel网络…

518抽奖软件,安全稳定,不怕手抖误按键

518抽奖软件简介 518抽奖软件,518我要发,超好用的年会抽奖软件,简约设计风格。 包含文字号码抽奖、照片抽奖两种模式,支持姓名抽奖、号码抽奖、数字抽奖、照片抽奖。(www.518cj.net) 防误按功能 入口: 主界面上点右…

node复制当前目录下的文件夹到另一层目录(包含多层文件夹嵌套)

前段时间在跟进node项目时有个node项目的需求,然后上线流程是把前端build后的文件夹放到后端仓库的静态资源目录下,再把后端代码发布上线。这样做的好处是在前端页面调用接口时,可以直接 /xxx来调用(浏览器会自动把域名补全&#…

Spring系统之IOC与AOP

前言 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。 IOC 1.IOC的概念 控制反转(IoCInversion of Control)IoC,用白话来讲,就是由容器控制程序之间的(依赖)关系,而非传统实现中,由程序代码…

Locust单机多核压测,以及主从节点的数据通信处理

一、背景 这还是2个月前做的一次接口性能测试,关于locust脚本的单机多核运行,以及主从节点之间的数据通信。 先简单交代下背景,在APP上线之前,需要对登录接口进行性能测试。经过评估,我还是优先选择了locust来进行脚…

2023我和云栖有个约会

时间:2023.11.1 地点:云栖小镇 事件:约会 昨天刚在网上看到了有阿姨在云栖大会给自己女儿相亲的照片,今天直接就赶了过去。约会了一整天,虽然很累,但真的很值得。由于是第一次和云栖约会,那就…

“深入理解Nginx的负载均衡与动静分离“

目录 引言一、Nginx简介1. Nginx的基本概念2. Nginx的特点3. Nginx的安装配置 二、Nginx搭载负载均衡三、前端项目打包四、Nginx部署前后端分离项目,同时实现负载均衡和动静分离总结 引言 在现代互联网应用中,高性能和可扩展性是至关重要的。Nginx作为一…

初出茅庐的小李博客之STCW15408AS单片机串口1使用记录

STCW15408AS单片机串口1使用记录 资源介绍: STC15W401AS系列单片机是STC生产的单时钟/机器周期(1T)的单片机,是宽电压/高可靠/低功耗/超强抗干扰的新一代8051单片机,采用STC第九代加密技术,无法解密, 代码完全兼容传…