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

结论先行:

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.mzph.cn/news/133527.shtml

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

相关文章

金豺算法优化VMD参数,六种适应度函数任意切换,最小包络熵、样本熵、信息熵、排列熵、排列熵/互信息熵、包络谱峰值因子...

声明:对于作者的原创代码,禁止转售倒卖,违者必究! 本期采用金豺优化算法(Golden Jackal optimization, GJO)优化VMD参数。选取六种适应度函数进行优化,以此确定VMD的最佳k和α参数。6种适应度函数分别是:最…

初识JVM

1. JVM内存区域划分 jvm在启动的时候,会申请到一整个很大的内存区域。整个一大块区域,不太好用。为了更方便使用,把整个区域隔成了很多区域,每个区域都有不同的作用。 本地方法栈 此处提到的栈和数据结构中的栈不是一个东西&…

【广州华锐互动】影视制作VR在线学习:身临其境,提高学习效率

随着科技的不断发展,影视后期制作技术也在日新月异。然而,传统的教学方式往往难以满足学员的学习需求,无法充分展现影视后期制作的魅力和潜力。近年来,虚拟现实(VR)技术的崛起为教学领域带来了新的机遇。通过VR教学课件&#xff0…

超详细Linux搭建Hadoop集群

一、给计算机集群起别名——互通 总纲: 1、准备3台客户机(关闭防火墙、静态IP、主机名称都设置好) 2、安装JDK(可点击) 3、配置环境变量 4、安装Hadoop 5、配置hadoop的环境变量 6、配置集群 7、群起测试 1.1、环境准备…

蓝鹏测控平台软件 智能制造生产线的大脑

测控软件平台,是由包括底层驱动程序、通讯协议等,集数据采集、自动反馈控制、信息分析以及多种工程应用于一体的一种电子信息处理平台。 蓝鹏测控软件平台目前支持各种文本标签 、数字标签;支持趋势图、波动图、缺陷图及统计图表。多端口实现…

MCU常见通信总线串讲(一)—— UART和USART

🙌秋名山码民的主页 😂oi退役选手,Java、大数据、单片机、IoT均有所涉猎,热爱技术,技术无罪 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 获取源码,添加WX 目录 前言一…

使用 curator 连接 zookeeper 集群 Invalid config event received

dubbo整合zookeeper 如图,错误日志 2023-11-04 21:16:18.699 ERROR 7459 [main-EventThread] org.apache.curator.framework.imps.EnsembleTracker Caller0 at org.apache.curator.framework.imps.EnsembleTracker.processConfigData(EnsembleTracker.java…

Lyapunov function 李雅普诺夫函数

文章目录 正文定义对定义中出现的术语的进一步讨论 Basic Lyapunov theorems for autonomous systems 自治系统的基本李雅普诺夫定理Locally asymptotically stable equilibrium 局部渐近稳定平衡Stable equilibrium 稳定平衡Globally asymptotically stable equilibrium 全局渐…

计算机毕业设计java+vue+springboot的论坛信息网站

项目介绍 本论文系统地描绘了整个网上论坛管理系统的设计与实现,主要实现的功能有以下几点:管理员;首页、个人中心、用户管理、公告管理、公告类型管理、热门帖子管理、帖子分类管理、留言板管理、论坛新天地、我的收藏管理、系统管理&#…

用Java(C语言也可以看)实现冒泡排序和折半查找(详细过程图)+逆序数组

目录 一、冒泡排序 1.冒泡排序介绍 2.排序的思路 3.完整代码 二、折半查找 1.折半查找介绍 2.查找的思路 3.完整代码 三、逆序数组 1.逆序思路 2..完整代码 一、冒泡排序 冒泡排序是众多排序的一种,无论在C语言或者Java中都很常见,后续在数据…

JAVA前端开发介绍

以一个网站为例包括网站设计、前端开发、程序开发等。网站设计就是网站的外观,平面的东西。程序开发也好理解就是功能实现。而前端开发,简单来说,就是把平面效果图转换成网页,把静态转换成动态。它的工作包括了:切图、写样式、做鼠…

IDEA取消git对项目的版本控制

前言 前几天新建项目的时候不小心选了个git仓库,导致这个测试项目一直被git管理着。 解决办法 1 右键项目 选择打开资源目录 2 删除.git文件 把目录下的.git文件删掉 3 删除idea中的git管理 删除完.git文件后,进入idea,右下角会有这样的提…

广域网加速的作用:企业为什么需要广域网加速?

由于局域网与广域网之间巨大的带宽鸿沟,通过增加带宽来满足膨胀的流量需求是不切实际的。 并且广域网带宽成本较高,增加广域网带宽对任何企业都意味着巨大的成本负担。这些使得控制 管理广域网带宽使用成为必需。 企业为什么要加速广域网? 对重要的企…

轻量封装WebGPU渲染系统示例<12>- 基础3D对象实体(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/PrimitiveEntityTest.ts 此示例渲染系统实现的特性: 1. 用户态与系统态隔离。 细节请见:引擎系统设计思路 - 用户态与系统态隔离-CSDN博客 2. 高频调用与低频调用隔…

2023年05月 Python(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 请选择,下面代码运行之后的结果是?( ) a 2 b 4 try:c a * bprint(c…

数据结构:AVL树的实现和全部图解

文章目录 为什么要有AVL树什么是AVL树AVL树的实现元素的插入平衡因子的更新AVL树的旋转 AVL树的检查完整实现 本篇总结的是AVL树中的全部内容,配有详细的图解过程 为什么要有AVL树 前面对map/multimap/set/multiset进行了简单的介绍,在其文档介绍中发现…

白盒测试用例的设计(图文讲解,超详细)

正文 语句覆盖:每条语句至少执行一次。判定覆盖:每个判定的所有可能结果至少出现一次。(又称“分支覆盖”)条件覆盖:每个条件的所有可能结果至少执行一次。判定/条件覆盖:一个判定中的每个条件的所有可能结…

开源七轴myArm协作机械臂正逆运动学技术讲解

引言: 在本文中,我们将深入探讨机器人学的两个核心概念:正运动学和逆运动学。这两个概念是理解和控制机械臂运动的基础。通过一个具体的7轴机械臂实例,我们将详细介绍如何计算机械臂的正运动学和逆运动学。我们首先会解释正运动学…

uniapp 微信小程序 uni-file-picker上传图片报错 chooseAndUploadFile

这个问题真的很搞, 原因是微信开发者工具更新了,导致图片上传问题。 解决方法: 将微信开发者工具的基础库改为2.33.0一下即可。 在微信开发者工具详情 - 本地设置中(记得点击‘推送’按钮):

【内功修炼】详解函数栈帧的创建和销毁

文章目录 1. 什么是函数栈帧2. 理解函数栈帧能解决什么问题呢?3. 函数栈帧的创建和销毁解析3.1 什么是栈?3.2 认识相关寄存器和汇编指令常见寄存器常用汇编指令 3.3 详解函数栈帧的创建和销毁3.3.1 函数的调用堆栈(main函数也是被其它函数调用…