Vuex 的原理

news2024/11/13 11:34:23

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  • 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化。

b025e120ca3d0bd2ded3d038d58cacf4.jpg

 Vuex为Vue Components建立起了一个完整的生态圈,包括开发中的API调用一环。 

(1)核心流程中的主要功能:

  • Vue Components 是 vue 组件,组件会触发(dispatch)一些事件或动作,也就是图中的 Actions;
  • 在组件中发出的动作,肯定是想获取或者改变数据的,但是在 vuex 中,数据是集中管理的,不能直接去更改数据,所以会把这个动作提交(Commit)到 Mutations 中;
  • 然后 Mutations 就去改变(Mutate)State 中的数据;
  • 当 State 中的数据被改变之后,就会重新渲染(Render)到 Vue Components 中去,组件展示更新后的数据,完成一个流程。

(2)各模块在核心流程中的主要功能:

  • Vue Components∶ Vue组件。HTML页面上,负责接收用户操作等交互行为,执行dispatch方法触发对应action进行回应。
  • dispatch∶操作行为触发方法,是唯一能执行action的方法。
  • actions∶ 操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发。
  • commit∶状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法。
  • mutations∶状态改变操作方法。是Vuex修改state的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等。
  • state∶ 页面状态管理容器对象。集中存储Vuecomponents中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。
  • getters∶ state对象读取方法。图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象。

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

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

相关文章

ansible执行mysql脚本

目录 概述实践环境要求ansible yml脚本命令离线包 概述 ansible执行mysql脚本 实践 官网文档 环境要求 环境需要安装以下内容: 1.mysql客户端(安装了mysql即会有)2.安装MySQL-python (Python 2.X) 详细插件安装链接 ansible yml脚本 关键代码如下: # 剧本…

Pytorch学习路程 2:神经网络分类与实战

目录 神经网络分类 下载数据集 加载数据集 定义损失函数 创建模型 使用DataSet和DataLoader化简我们的数据封装 使用Pytorch神经网络进行气温预测 使用到的包: 构建网络模型 Reference 神经网络分类 我们以最为经典的MNIST数据集为例子,识别手…

GO环境及入门案例

文章目录 简介一、win GO开发环境安装二、Linux go运行环境二、GO代码入门2.1 导包案例2.2 赋值2.3 变量、函数2.4 三方库使用 简介 go不是面向对象语言, 其指针、结构体等比较像C,知名的go 开源项目有docker k8s prometheus node-exporter等 一、win …

FPGA - ZYNQ Cache一致性问题

什么是Cache? Cache是一种用来提高计算机运行速度的一种技术。它是一种小而快的存储设备,位于CPU与内存之间,用于平衡高速设备与低速设备之间的速度差异。Cache可以存储常用的数据或指令,以便CPU更快地获取,从而减少对…

2023年美国西岸行 - Day 1

本来旅行回来就像记录的,结果一拖就是快1年。当然中间原先记录的博客平台关闭也有部分原因,但不是主要原因。趁着今天复活20年前的CSDN博客,赶紧记录一下。 疫情之后第一次全家长途旅行。这次美国之行,在3-4月份订机票的时候跟临…

今日刷三题(day4):简写单词+dd爱框框+除2!

题目一:简写单词 题目描述: 比如 “College English Test”可以简写成“CET”,“Computer Science”可以简写为“CS”,“I am Bob”简写为“IAB” 输入输出描述: 输入:一个复合单词 输出:输…

一文读懂自动化运维工具ansible及其使用

1. ansible简介 ansible是干什么的 ansible是目前最受运维欢迎的自动化运维工具,基于Python开发,集合了众多运维工具(SaltStack puppet、chef、func、fabric)的优点,实现了批量系统配置、批量程序部署、批量运行命令…

java高校办公室行政事务管理系统设计与实现(springboot+mysql源码+文档)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的闲一品交易平台。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 基于mvc的高校办公室行政…

基于SpringBoot + Vue实现的奖学金管理系统设计与实现+毕业论文+答辩PPT

介绍 角色:管理员、学院负责人、学校负责人、学生 管理员:管理员登录进入高校奖助学金系统的实现可以查看系统首页、个人中心、学生管理、学院负责人管理、学校负责人管理、奖学金类型管理、奖学金申请管理、申请提交管理、系统管理等信息 学院负责人:学院负责人登录系统后&am…

排序 “叁” 之交换排序

目录 1. 基本思想 2.冒泡排序 2.1 基本思想 2.2 代码示例 2.3 冒泡排序的特性总结 3.快速排序 3.1 基本思想 🌵hoare版本 🌵挖坑法 ​编辑 🌵前后指针版本 ​编辑 3.2 快速排序优化 🌻三数取中法选key 3.4 快速排序…

systemverilog中位的选择

常用的变量类型就是 reg 和 wire ,这两种类型可以定义 一位的变量,也可以定义多位,其中 1 bit 的变量称为 标量(scalar),多 bit 的变量称为 向量(vector),如下所示: wire o_nor; // singl…

【JavaWeb】Day51.Mybatis动态SQL

什么是动态SQL 在页面原型中,列表上方的条件是动态的,是可以不传递的,也可以只传递其中的1个或者2个或者全部。 而在我们刚才编写的SQL语句中,我们会看到,我们将三个条件直接写死了。 如果页面只传递了参数姓名name 字…

Web前端框架/库/工具

前言 前端从步枪(原生js)到了半自动武器(jQuery)并进化为全自动武器(三大框架(angular,react,vue及其生态链))。 常说工欲善其事必先利其器。对于那些想要提…

网络原理-IP协议

一、IP协议报头 版本号:用来表示IP协议的版本,现在常用的IP协议有两个版本,IPv4和IPv6,其他版本可能只存在于实验室中,并没有被广泛的使用。 首部长度:用来表示IP报头的长度,因为存在"选项"字段,所以IP报头是可变长的,此处单位为4…

B树和B+树试题解析

一、单项选择题 01.下图所示是一棵(A ). A.4阶B树 B.3阶B树 C.4阶B树 D.无法确定 02.下列关于m阶B树的说法中,错误的是( C ). A.根结点至多有m棵子树 B.所有叶结点都在同一层次上 C.非叶结点至…

【MySQL】查询(进阶)

文章目录 前言1、新增2、聚合查询2.1聚合函数2.1.1count2.1.2sum2.1.3avg2.1.4max和min 2.2、GROUP BY子句2.3HAVING 3、联合查询/多表查询3.1内连接和外连接3.2自连接3.3子查询3.4合并查询 前言 在前面的内容中我们已经把查询的基本操作介绍的差不多了,接下来我们…

基于SpringBoot + Vue实现的学生心理咨询评估管理系统设计与实现+毕业论文+开题报告+答辩PPT

介绍 系统有管理员和用户。 管理员可以管理个人中心,用户管理,试题管理,试卷管理,考试管理等。用户参加考试。 学生心理咨询评估系统的登录流程,针对的角色就是操作员的操作角色。在登录界面需要的必填信息就是账号信…

创新案例|Amazon.com 2023 年营销策略:电子商务零售巨头商业案例研究

2022 年最后一个季度,亚马逊报告净销售额超过 1,492 亿美元。这种季节性峰值是亚马逊季度报告的典型特征,但增长是不可否认的,因为这是该公司有史以来最高的季度。毫无疑问,这家电商零售巨头继续引领电商增长。本文将介绍我们今天…

Flink学习(七)-单词统计

前言 Flink是流批一体的框架。因此既可以处理以流的方式处理,也可以按批次处理。 一、代码基础格式 //1st 设置执行环境 xxxEnvironment env xxxEnvironment.getEnvironment;//2nd 设置流 DataSource xxxDSenv.xxxx();//3rd 设置转换 Xxx transformation xxxDS.…

【春秋云镜】CVE-2023-43291 emlog SQL注入

靶场介绍 emlog是一款轻量级博客及CMS建站系统,在emlog pro v.2.1.15及更早版本中的不受信任数据反序列化允许远程攻击者通过cache.php组件执行SQL语句。 不感兴趣的可以直接拉到最后面,直接获取flag 备注:没有通过sql注入获取到flag&…