Pinia 是什么?Redux、Vuex、Pinia 的区别?

news2024/10/1 5:34:02

结论先行:

Pinia 是 Vue 官方团队开发的一个全新状态管理库。与 Redux、Vuex 相同,核心都是解决组件间的通信和数据的共享问题。 

Pinia 和 Vuex 类似,但使用起来更加简单和直观。因为 Pinia 基于 Vue3 的 Composition 组合式 API 风格,还支持完整的类型定义 TypeScript 

而且 Pinia 更加轻量级,打包出来的体积很小。因为 Pinia 不再使用 Vuex 中一些复杂的概念,比如 mutations  modules

还可以通过扁平化的方式灵活使用每一个 Store,而 Vuex 只支持一个 store 实例。

 

具体解析:

Redux、Vuex 和 Pinia 都是用于状态管理的流行框架,它们的主要区别如下:

1、Pinia

 

文档:

Pinia 中文文档 

Pinia 是 Vue 官方团队成员专门开发的一个全新状态管理库,并且 Vue 的官方状态管理库已经更改为了 Pinia。 

在 Vuex 官方仓库中也介绍说可以把 Pinia 当成是不同名称的 Vuex 5,这也意味不会再出 5 版本了。

与 Vuex 相比,Pinia 提供了一个更简单的 API,基于 Vue3 的 composition API,使其易于编写可重用的逻辑和代码

Pinia 更重要的是,它使用原生的 Proxy 对象来代替 Object.defineProperty,使得 Pinia 更快、更高效。

优点:

① 更加轻量级,压缩后提交只有1.6kb

② 完整的 TS 的支持,Pinia 源码完全由 TS 编码完成

Pinia 在与 TypeScript 一起使用时,具有可靠的类型判断支持;Vuex 之前对 TS 的支持很不友好;

③  移除 mutations,只剩下 state 、 actions 、 getters

等同于组件的 data、methods、computed;

一旦 store 被实例化,就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性;

在使用 Vuex 的时候,更改状态需要纠结选取 mutation 还是 action;而且他们最初带来的 devtools 集成,但这不再是问题了~~

可以在getters、actions中可以通过 this访问整个store实例 的所有操作; 

 

④ 不再有 modules 的嵌套结构,可以灵活使用每一个 Store,通过扁平化的方式来相互使用的;

无需手动添加每个 store,它的模块默认情况下创建就自动注册。 

在 Vuex 以前,数据不够扁平化、调用的时候过长;

 

一个 Store (如 Pinia)是一个实体,它持有着组件树的状态和业务逻辑,也就是保存了全局的状态;

可以应用程序中定义任意数量的 Store 来管理状态;

⑤ 也不会再有命名空间的概念,不需要记住他们的复杂关系

⑥ 支持服务端渲染(SSR)

⑦ 更友好的代码分割机制

⑧ 提供了 Pinia 状态持久化

配置 | pinia-plugin-persistedstate 

pinia-plugin-persistedstate

2、Vuex

对 Vuex 的理解-CSDN博客

  • Vuex 是一个专门为 Vue.js 设计的状态管理库,可以轻松地集成到 Vue.js 应用中使用。
  • Vuex 将应用程序中所有组件的共享状态抽象为一个单一的状态树,并通过使用 action 和 mutation 来修改状态。
  • Vuex 提供了丰富的 API,例如高级状态管理、插件和模块化等。

 

3、Redux
  • Redux 是一个独立于 React 的 JavaScript 状态容器,也可以与其他视图库集成使用。
  • Redux 的核心理念是单一数据源 (Single Source of Truth),即应用程序中的所有状态都存在于一个单一的存储库中,并通过纯函数 (Pure Function) 修改状态。
  • Redux 为应用程序提供了一个可预测的状态管理系统,同样适用于 SSR。

 

4、总结

总之,Redux、Vuex 和 Pinia 都提供了一种可预测的状态管理方案,并有其自身独特的优点。

Pinia 适合那些想要一个简单、轻量级的状态管理库的开发者,而 Vuex 则适合那些需要更多功能和灵活性的开发者。 

具体选择哪一个取决于应用的复杂度、开发团队的技能水平和个人偏好等因素。

如果是 Vue.js 3 的项目,可以考虑使用 Pinia,否则可以考虑 Vuex 或 Redux。

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

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

相关文章

【k8s】数据存储

一、数据存储的概念 pod的生命周期可能很短,会被频繁地创建和销毁。那么容器在销毁时,保存在容器中的数据也会被清除。这种结果对用户来说,在某些情况下是不乐意看到的。为了持久化保存容器的数据,kubernetes引入了Volume的概念。…

【Linux】 OpenSSH_9.3p2 升级到 OpenSSH_9.4p1(亲测无问题,建议收藏)

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

异常处理流程

1.什么是异常源? 引发处理器进入对应的异常模式 2.异常源和异常模式的对应关系 1.五种异常模式,七种异常源 ; 2.根据不同的异常源,引发处理器进入不同的异常模式,执行异常处理函数 3.异常源具有优先级,复…

PLC常用的几种编程语言

PLC的软件编程语言与一般计算机语言相比,具有明显的特点,它既不同于高级语言,也不同于一般的汇编语言,它既要满足易于编写又要满足易于调试的要求。 早期的PLC仅支持梯形图编程语言和指令表编程语言,现根据国际电工委员…

log4j CVE-2021-44228 RCE漏洞复现

一、漏洞特征 Apache Log4j 是 Apache 的一个开源项目,Apache Log4j2是一个基于Java的日志记录工具。该工具重写了Log4j框架,并且引入了大量丰富的特性。我们可以控制日志信息输送的目的地为控制台、文件、GUI组件等,通过定义每一条日志信息的…

推荐系统设计与实现 协同过滤推荐算法 计算机竞赛

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 推荐系统设计与实现 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1…

高效节省IT资源,WorkPlus让企业轻松实现业务场景的快速移动化

在企业的业务移动化进程中,维护iOS、安卓、桌面端不仅需要专业的技术支持,更需要投入大量的IT人力资源。然而,选择WorkPlus作为移动化解决方案,企业可以轻松省去iOS、安卓、桌面端工程师的维护成本,只需借助H5工程师的…

搅拌站排队叫号系统 | 混凝土智慧物流管理平台

思伟软件 智慧物流管理平台 混凝土 用砼行 在线下单。工地通过砼行小程序下单,搅拌站通过砼行APP接单。 智能调度。手机打卡,自动排队。大小车自动分列,拌台生产随时看。电子小票直达司机手机。自动收到砼行APP推送的电子小票与广播发车提…

C 数据类型

C 数据类型 在 C 语言中,数据类型指的是用于声明不同类型的变量或函数的一个广泛的系统。变量的类型决定了变量存储占用的空间,以及如何解释存储的位模式。 C 中的类型可分为以下几种: 序号类型与描述1基本数据类型 它们是算术类型&#x…

数字化转型:2023零售业的新机遇,亿发零售云系统释放无限可能

零售业的数字化转型不仅能够为顾客带来卓越的购物体验,同时也能为零售企业提供丰富的数据分析、销售预测和生产管理的机会。通过这些分析,企业能够更准确地了解市场需求和消费者的购买行为,进而制定更具针对性的营销策略,从而增强…

妙享中心升级,小米电脑管家 v1.0.0.489,非小米笔记本安装教程

前些天发现了一个人工智能学习网站,通俗易懂,风趣幽默,适合想要了解和入门的朋友:点击访问链接 十月底,小米新品发布会发布了新的年度旗舰,小米14和14 Pro,同时发布了最新的自研系统——小米澎湃…

如何在在线Excel文档中对数据进行统计

本次我们将用zOffice表格的公式与数据透视表分析样例(三个班级的学生成绩)。zOffice表格内置了大量和Excel相同的统计公式,可以进行各种常见的统计分析,如平均值、标准差、相关性等。同时,zOffice也有数据透视表功能&a…

Flutter 第三方 flutter_screenutil(屏幕适配)

一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络&#xff0…

深入浅出 JetPack Compose UI 自动更新原理

为什么需要学习 Compose 的底层原理? 我想学习底层原理的主要原因是我对 Jetpack Compose 是如何运作的非常感兴趣。相对于传统的 View 系统,JetPack Compose 写起来相当神奇。具体来说,Composable 函数不会有返回值;它会自动更新…

NVIDIA Jetson SOC 内存分配策略

CPU 是Host, GPU 是Device, 系统内存分配策略如下: 这段话的翻译如下: 集成的GPU会和CPU以及其他Tegra引擎共享DRAM(动态随机存储器),并且CPU可以通过将DRAM的内容移动到交换区域(SWAP area)或者相反来控制…

每个 .vue 文件最多可以包含一个顶层 <template> 块

问题: 回答: 实际解决方法: 上图将template的#header写到了上一行的el-table-column中就出发这个问题

直播带货小程序的前端开发技巧与工具

当下,直播带货小程序已经成为了一个备受欢迎的选择,因为它能够将传统直播和电子商务相结合,为用户提供更好的购物体验。本文将深入探讨直播带货小程序的前端开发技巧和工具,以帮助开发人员更好地构建这一类型的应用。 1.小程序基础…

【Orangepi Zero2 全志H616】驱动OLED屏应用-IIC协议、设备的映射(mmap)

一、OLED屏幕 二、Orangepi的IIC接口 三、wiringPi库示例代码 四、Source insight 初步分析wiringP源码OLED_DEMO 五、设备的映射 六、mmap函数 七、简单OLED屏幕开发及实现 一、OLED屏幕 二、Orangepi的IIC接口 1) 由 26pin 的原理图可知, Orange Pi Zero 2 可用…

深度学习(CNN+RNN)笔记2

文章目录 第五课:序列模型(Sequence Models)第一周:循环神经网络(Recurrent Neural Networks)【序列模型、语言模型序列生成、对新序列采样。RNN、GRU、LSTM、双向RNN、深度RNN】第二周:自然语言处理与词嵌入&#xff…

从受众吸引到客户:提高海外社媒转化率的10个技巧!

在当今数字化时代,社交媒体已经成为企业与海外市场互动的关键工具。然而,只有吸引了足够的受众并将他们转化为客户,社交媒体才能实现其真正的潜力。本文Nox聚星将给大家分享提高海外社交媒体的转化率的10个实用技巧,将潜在受众转化…