Vuex 的原理

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.hqwc.cn/news/639978.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ai写作软件哪个好,5款倍受好评的AI写作软件

ai写作软件哪个好,5款倍受好评的AI写作软件!在当今信息爆炸的时代,人们对于高效、智能的工具需求日益增加。AI写作软件因其独特的优势逐渐成为许多人的选择。但是在众多的AI写作软件中,究竟哪一款更胜一筹呢?下面将介绍5款倍受好评…

Centos7虚拟机与真机乎ping以及虚拟机ping不通的原因

以下是本机的网络地址 首先我在这两天的学习中遇到了以下种种问题: 本机与虚拟机互相ping不通虚拟机无法连接网络访问互联网本机可以ping通虚拟机 但是虚拟机不能ping本机 解决方法: 我在这里把dhcp改成了静态ip地址 这样以后不管怎么变化IP地址都没…

对接浦发银行支付(八)-- 对账接口

一、背景 本文不是要讲述支付服务的对账模块具体怎么做,仅是介绍如何对接浦发银行的对账接口。 也就是说,本文限读取到对账文件的内容,不会进一步去讲述如何与支付平台进行对账。 如果要获取商户的对账单,需要遵循以下步骤&…

Dubbo元数据中心

元数据中心为 Dubbo 中的两类元数据提供了存取能力:地址发现元数据、服务运维元数据。 一、地址发现元数据 Dubbo3 中引入了应用级服务发现机制用来解决异构微服务体系互通与大规模集群实践的性能问题,应用级服务发现将全面取代 2.x 时代的接口级服务发…

【Vue3】$subscribe订阅与反应

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

eNSP-路由引入与过滤简单配置

目录 实验要求 IP配置 配置动态路由协议 RIP OSPF 查看建邻情况 双向重发布 路由过滤 地址前缀列表 静默接口 实验要求 1、按照图示配置 IP 地址,R1,R3,R4 上使用 loopback 口模拟业务网段 2、R1 和R2 运行 RIPv2,R2&am…

SpringCloud系列(9)--将服务消费者Consumer注册进Eureka Server

前言:上一章节我们介绍了如何将服务提供者注册进Eureka服务里,本章节则介绍如何将服务消费者Consumer注册进Eureka服务里 Eureka架构原理图 1、修改consumer-order80子模块的pom.xml文件,引入Eureka Clinet的依赖,然后reolad一下&…

学习笔记Day21:转录组差异分析

转录组差异分析 差异分析难点在于将数据处理成需要的格式 表达矩阵 数值型矩阵-count 行名是symbol 低表达量的基因需要过滤 分组信息 因子,对照组在level第一位 与表达矩阵的列一一对应 项目名称 字符串(不要有特殊字符) TCGA-XX…

LeetCode_1304.和为零的 N 个不同整数

✨✨所属专栏:LeetCode刷题专栏✨✨ ✨✨作者主页:嶔某✨✨ 题目: 题解: 题目说让我们返回一个由n个各不相同的整数组成的数组,相加为0。 这里的比较好的办法就是类似于 1 2 3 0 -3 -2 -1这样对称的数组。既满足要求…

低代码新时代:6款免费开发平台助你畅行编码之路

本篇文章为您介绍的六款免费又好用的低代码开发平台有:Zoho creator、Baserow、OS.bee、nuBuilder、JHipster、Appian。 一、Zoho creator Zoho Creator是一款国际化的低代码开发平台,有超17年低代码经验。近些年,Zoho Creator以其成本低、国…

第25天:安全开发-PHP应用文件管理包含写入删除下载上传遍历安全

第二十五天 一、PHP文件管理-下载&删除功能实现 1.文件上传: 无过滤机制黑名单过滤机制白名单过滤机制文件类型过滤机制 2.文件删除: unlink() 文件删除函数调用命令删除:system shell_exec exec等 3. 文件下载: 修改HT…

python3--lxml pytoml.core.TomlError expected_equals报错解决

文章目录 一、问题二. 解决方法:三. 参考:四. 总结 一、问题 在ubuntu的armbian上的python3中安装lxml时报错了 安装命令是 pip3 install lxml报错简略信息如下图 File "/usr/share/python-wheels/pytoml-0.1.2-py2.py3-none-any.whl/pytoml/par…