vue:状态管理库及其部分原理(Vuex、Pinia)

1、为什么要用状态管理库?

多组件的状态共享问题: 当多个组件需要访问和修改相同的数据时,我们需要在组件之间传递 props或者使用事件总线。当,应用就会变得难以维护和调试。

多组件状态同步问题: 当一个组件修改了状态,其他组件可能无法立即得知该变化。

状态变更的追踪问题: 无法追踪到状态的变化是由何处引起的,使得调试和维护变得困难。

2、Vuex

2.1、核心概念

2.1.1、State:用于存储应用程序的状态数据

当你需要在多个组件之间共享数据时,可以将这些数据放入state中。

例如,保存用户登录状态、购物车中的商品列表等。

可以通过在组件中使用store.state.xxx或计算属性来获取状态数据。

2.1.2、Mutation:用于修改状态的方法,必须是同步函数。

什么时候用? 当你需要修改状态时。让所有的状态变更都经过 mutation可以保证状态的变更是可追踪的。

通常,一个 mutation 对应一个状态变更操作。例如,修改用户登录状态、添加商品到购物车等。

2.1.3、Action:用于处理异步逻辑或提交多个 mutation。

什么时候用? 当你需要处理异步操作(例如发起网络请求)或需要在一个 action 中提交多个 mutation 时。

Action 可以包含任意的异步操作,并可以通过提交 mutation 来修改状态。

例如,获取用户信息的异步请求、添加多个商品到购物车等。

2.1.4、Getter:用于从状态中获取派生数据的方法。

什么时候用? 当你需要根据状态state.xxx计算出一些数据时。

Getter 可以将一些复杂的数据计算逻辑封装起来,并在组件中使用 store.getters 来获取计算后的数据。

例如,基于购物车商品列表计算购物车总价、根据用户权限判断是否具有管理员角色等。

2.2、原理(v4.0.2)

2.2.1、vuex如何挂载到vue实例的

install (app, injectKey) {// 使用`vue.provide()`将`vuex`提供给整个应用app.provide(injectKey || storeKey, this)// 将vuex实例赋值给vue.$store;// 在项目的非setup中可以使用this.$store.state.xxx取值就是这样来的app.config.globalProperties.$store = this
}

2.2.2、useStore 源码

import { inject } from 'vue'export const storeKey = 'store'export function useStore (key = null) {return inject(key !== null ? key : storeKey)
}

commit源码

  commit (_type, _payload, _options) {const { type, payload, options } = unifyObjectStyle(_type, _payload, _options)const mutation = { type, payload }// 查找该类型对应的 mutationsconst entry = this._mutations[type]if (!entry) {return}// 执行mutations对应的处理函数this._withCommit(() => {entry.forEach(function commitIterator (handler) {handler(payload)})})// 通知订阅者this._subscribers.slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe.forEach(sub => sub(mutation, this.state))}

3、Pinia

相比vuex的优势:

  • 可通过devtools追踪数据变化,无需通过commit提交Mutation
  • 支持TS,提供代码自动补全,源码为TS编写;vuex是用JS编写的,vuex要支持TS需要安装插件
  • pinia更轻,大小只有 1kb 左右

改变状态的方法

  • 直接修改变量
  • 调用action
  • 调用patch

3.1原理

install 原理与vuex一致

  	let toBeInstalled: PiniaPlugin[] = []install(app: App) {if (!isVue2) {pinia._a = app// 暴露pinia,组件通过inject注入pinia实例app.provide(piniaSymbol, pinia)// 模版中可通过$pinia访问app.config.globalProperties.$pinia = pinia// 将pinia的plugin 存到插件列表toBeInstalled.forEach((plugin) => _p.push(plugin))toBeInstalled = []}},

pinia的plugin实现原理
1、在调用vue.use(pinia)之前注入插件的情况,会将plugin存放到toBeInstalled列表,
2、调用vue.use(pinia)之后,会将toBeInstalled的插件存到pinia实例的_p中
3、调用useStore时将plugin注入每个Store实例

    pinia.use(plugin) {if (!this._a && !isVue2) {toBeInstalled.push(plugin)} else {_p.push(plugin)}return this}
useStore(pinia) {if (!pinia._s.has(id)) {// creating the store registers it in `pinia._s`if (isSetupStore) {createSetupStore(id, setup, options, pinia)} else {createOptionsStore(id, options as any, pinia)}/* istanbul ignore else */if (__DEV__) {// @ts-expect-error: not the right inferred typeuseStore._pinia = pinia}}
}
createSetupStore () {pinia._p.forEach((extender) => {assign(store,scope.run(() =>extender({store: store as Store,app: pinia._a,pinia,options: optionsForPlugin,}))!)}}

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

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

相关文章

mac下配置git自定义快捷命令

1. 指定自定义别名 vi ~/.bash_profile open ~/.bash_profile 配置环境变量,插入类似下面的内容 .bash_profile文件 alias gcgit checkout alias gmgit commit -m alias gcbgit checkout -balias gtgit statusalias gagit add .alias glggit logalias gdgit diffalias gr…

mysql安装及部署

1.在/usr/local下创建mysql目录 cd /usr/local mkdir /mysql 2.在mysql目录中下载 cd mysql/ wget https://cdn.mysql.com/archives/mysql-8.0/mysql-8.0.34-1.el9.x86_64.rpm-bundle.tar 3.解压 tar xvf mysql-8.0.34-1.el9.x86_64.rpm-bundle.tar 4.安装 dnf localinst…

Ivanti Connect Secure 曝两大零日漏洞,已被大规模利用

威胁情报公司Volexity发现,影响 Ivanti 的 Connect Secure VPN 和 Policy Secure 网络访问控制 (NAC) 设备的两个零日漏洞正在被大规模利用。自1月11日开始,多个威胁组织在大范围攻击中利用CVE-2023-46805身份验证绕过和CVE-2024-21887命令注入漏洞。 V…

vue如何通过$http的post方法请求下载二进制的Excel文件

方式一:单独接口,接口封装 特定的service.js 1.下载 //下载 export function getReportTemplate(){return new Promise((resolve, reject) > {axios({method: post,url: /fas/engine/web/fund/final/template,responseType: "blob",headers: {Conten…

分类问题:人工神经网络(ANN)+BP算法(误差后向传播)+考试例题讲解

学习链接:分类问题:人工神经网络(ANN)+BP算法(误差后向传播)+考试例题讲解 资料链接:链接:https://pan.baidu.com/s/1ijvMQmwtRgLO4KDSsNODMw 提取码:vyok 神经网络的应用非常的广,它核心思想非常简单,就是人是如何认知感知并且处理这个世界中的现实问题的。…

[C++] opencv - copyTo函数介绍和使用案例

copyTo函数介绍 copyTo函数是OpenCV库中的一个成员函数,用于将一个Mat对象的内容复制到另一个Mat对象中。 函数原型: void cv::Mat::copyTo(OutputArray m) const;void cv::Mat::copyTo(OutputArray m, InputArray mask) const; 参数说明:…

大创项目推荐 深度学习的水果识别 opencv python

文章目录 0 前言2 开发简介3 识别原理3.1 传统图像识别原理3.2 深度学习水果识别 4 数据集5 部分关键代码5.1 处理训练集的数据结构5.2 模型网络结构5.3 训练模型 6 识别效果7 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习…

数据库的设计模式

数据库的设计模式常用于处理特定类型的数据和需求。以下是一些常见的模式: 1. EAV(Entity-Attribute-Value) 用途:用于非结构化或高度可变的数据模型。描述:实体以行形式存储,属性和值作为额外的表格列存…

01|js包管理工具和原理分析:npm安装机制及企业级部署私服原理

01 | js包管理工具和原理分析:npm安装机制及企业级部署私服原理 前端工程化离不开 npm 或者 Yarn 管理工具 通过script串联起各个职能部分,让独立的环节自动运转起来。 npm和yarn体系特别庞大,在使用依赖时可能出现以下疑问 删除node_module…

数据结构之基本数据类型(Python)

前言 接下来我们将会先学习Python 的基本数据类型,以及堆、栈、链表、树和图等数据结构,这是学习算法的基础。套用行业内的一句话: 数据结构是算法的骨骼。 数据结构是一门庞大的学科,远不是一本书就可以讲清楚的。如果想更深入地…

安全跟我学|这些网络安全知识,请务必牢记

随着“互联网”时代的到来,人们的生活变得更加便利,但电信诈骗、信息泄露、网络谣言、恶意软件等也随之而来。面对网络这把双刃剑,如何绷紧思想“安全弦”,正确安全使用网络呢?带着这些疑问,让我们一起来学…

【不需要网络不需要显卡】本地部署GPT

【不需要网络/不需要显卡】本地部署GPT 大家好,我是老 J 我们都知道ChatGPT目前只有两种使用方式,一种是直接去官网访问,适合个人用户;另一种是API调用,适合企业或者网站使用。这两种方式的门槛都比较高,…

springboot105基于保信息学科平台系统设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于保信息学科平台系统设计与实现 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 …

PXE批量高效网络装机

总结 1实验流程只能抄老师,记忆浅 2排错能力几乎无 3 指令用的太死, 一 系统装机的三种引导方式 启动 操作 系统 1.硬盘 2.光驱(u盘) 3.网络启动 pxe 重装系统? 在已有操作系统 新到货了一台服务器&#xff…

常见的查找算法

前提:除了线性查找外,下面的其他查找算法适用于有序数组(以从小到大为例) 一、线性查找 /*** 这里若要查找重复出现的数,可以把索引放入到一个集合中* param arr* param value* return 如果没有找到,则返…

联合体中嵌套结构体,结构体未命名时,结构体成员变量的引用

参考文章&#xff1a;C语言 结构体 联合体 | 嵌套使用_联合体里面嵌套结构体-CSDN博客 如题&#xff0c;其实直接用 联合体名.结构体成员变量名 即可。 程序&#xff1a; #include <stdio.h>typedef unsigned int uint32_t; typedef unsigned char uint8_t;union b…

GNSS数据下载软件 -- 武汉大学 Fast软件(体验感极佳~)

目录 一、简介与下载地址 1.介绍 2.软件特点 3.下载地址 4.以github下载链接为例 二、下载方法(三种方法&#xff0c;以windows系统为例) 1.双击"Fast.exe"根据提示引导下载 2.手动输入"cmd"进入命令行界面&#xff0c;通过输入相关命令进行下载 …

el-date-picker如果超过限制跨度则提示

需求&#xff1a;实现日期时间选择组件跨度如果超过限制天数&#xff0c;点击查询则提示超过限制时间 封装一个方法&#xff0c;传入开始和结束时间以及限制天数&#xff0c;如果超过则返回false //计算时间跨度是否超过限制天数isTimeSpanWithinLimit(startTime, endTime, li…

Python编程之旅7:函数

欢迎来到第七篇《Python编程之旅》的博客&#xff01;在前面的几篇博客中&#xff0c;我们已经学习了Python的基本语法、数据类型、流程控制语句以及列表、元组和字典等内容。今天&#xff0c;我们将进一步探索Python编程的世界&#xff0c;重点关注函数。 函数 函数是一种可…

AIOps探索 | 应急处置中排障的降本增效方法探索

原作者&#xff1a;擎创科技 资深产品专家 布博士 前言 在事件管理及应急场景的场景下&#xff0c;一般会造成业务服务和技术服务故障&#xff08;如应用系统、微服务架构等不同的技术组件&#xff09;。为了实现对业务的影响分析、查看技术组件的相互依赖关系以及进行根因排…