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

结论先行:

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

它和 Vuex 的区别呢,一个是虽然它和 Vuex 类似,但 Pinia 使用起来更加简单和直观。因为 Pinia 基于 Vue3 的组合式 API 风格,还支持TypeScript 

再一个区别呢,Pinia 更加轻量级,打包出来的体积很小。因为 Pinia 不再使用 Vuex 的一些复杂概念,例如模块和 mutations

而且,Pinia 还可以通过扁平化的方式灵活使用每一个 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.mfbz.cn/a/129912.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Unity】零基础实现塔防游戏中敌人沿固定路径移动的功能

目录 场景搭建 烘焙(Bake) 敌人动作控制 脚本实现 我们知道,在一些塔防小游戏中,敌人往往会沿着给定的一条路径移动,我们在条路的路边会布置防御设施,攻击消灭敌人,阻止敌人到达终点。 场景搭建 我们首先新建一个…

【数据结构与算法】DFA算法-关键词匹配-java案例实现

该算法往往是用于匹配一些敏感词、绝对词等,从一篇文章中快速找到其中包含的关键词。 实现思路: 先读取所有关键词并存入set集合中。再将set中的关键词存入HashMap中,是以每个关键词字顺序存储,key为一个字、value为一个HashMap。…

Laplacian Redecomposition for Multimodal Medical Image Fusion

LRD方法 GDIE means ‘gradient-domain image enhancement’,DGR means ‘decision graph redecomposition’ MLD means ‘maximum local difference’ LEM means ‘local energy maximum’,OD means ‘overlapping domain’,LP means ‘L…

Awesome-Selfhosted:互联网常见服务开源平替 | 开源日报 No.68

awesome-selfhosted/awesome-selfhosted Stars: 137.7k License: NOASSERTION Awesome-Selfhosted 是一个列出了可以在自己的服务器上托管的免费软件网络服务和 Web 应用程序列表。 以下是该项目的主要功能: 提供各种类型 (如分析、备份、博客平台等) 的开源软件…

Vue创建浅层响应式数据

shallowReactive:只处理对象第一层数据的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式,不处理对象类型的响应式。 shallowReactive 适用于:如果有一个对象类型的数据,结构比较深…

SQL表、字段、查询参数获取

SQL工具类表、字段、查询参数提取 1. 执行效果2. 使用2.1 引入依赖2.2 相关实体2.3 工具类 1. 执行效果 2. 使用 2.1 引入依赖 <!-- sql 解析处理--><dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifact…

PLSQL工具 数据库连接名的设置

在help >>surpost info 能看到 这东西好难用啊。。不直接显示url,非要搞个名称。。

2023年A股借壳上市研究报告

第一章 借壳上市概况 1.1 定义 借壳上市作为一种独特的资本市场操作手法&#xff0c;历来是企业拓展融资渠道和实现市场战略目标的重要途径。具体来说&#xff0c;借壳上市可分为狭义与广义两种模式。在狭义的定义下&#xff0c;借壳上市是指一家已上市的公司的控股母公司&am…

React【异步逻辑createAsyncThunk(一)、createAsyncThunk(二)、性能优化、createSelector】(十二)

文章目录 异步逻辑 createAsyncThunk&#xff08;一&#xff09; createAsyncThunk&#xff08;二&#xff09; 性能优化 createSelector 异步逻辑 //Product.js const onAdd () > {const name nameRef.current.value// 触发添加商品的事件dispatch(addProduct({name…

vue3介绍

介绍 3完全兼容2的语法 vue3&#xff1a;体积更小&#xff0c;性能会更高。底层做了很多优化 2倍左右 vue3vitets 渐进式框架 vue3和vue2 的区别 新语法&#xff0c;性能上提升很多 思想是一致的&#xff1a;动态绑定&#xff1a;状态data&计算属性&#xff0c;监听某些状态…

超声波俱乐部分享:Enter AI native application

11月5日&#xff0c;2023年第十四期超声波俱乐部内部分享会在北京望京举行。本期的主题是&#xff1a;Enter AI native application。 到场的嘉宾有&#xff1a;超声波创始人杨子超&#xff0c;超声波联合创始人、和牛商业创始人刘思雨&#xff0c;蓝驰创投合伙人刘勇&#xf…

The Sandbox于香港举办全球首个创作者日,推出「公开发布」功能,并为 GameMakerFund提供1亿$SAND基金!

新的 NFT 铸造、无需编码的 Game Maker 软件升级、其他支持 Web3 创作者的功能优化。 2023 年 11 月 3 日——The Sandbox 举办了首届全球创作者日活动&#xff0c;并在活动期间宣布了其在 2024 年的计划&#xff0c;包括为创作者赋能&#xff0c;在地图上呈现 2000 个用户生成…

说说 React中的setState执行机制

一、是什么 一个组件的显示形态可以由数据状态和外部参数所决定&#xff0c;而数据状态就是state 当需要修改里面的值的状态需要通过调用setState来改变&#xff0c;从而达到更新组件内部数据的作用 如下例子&#xff1a; import React, { Component } from react export d…

flutter 使用 hive 遇到的错误

1. ] Unhandled Exception: RangeError: Not enough bytes available. 根据日志定位到 下图的地方 解决&#xff1a;因为之前存在保存到本地的信息&#xff0c;但是你修改了 数据类里面的东西&#xff08;比如添加变量啥的&#xff09;&#xff0c;清空app缓存或者卸载重新构…

vue2和vue3 的双向绑定原理

前文: 都知道vue是双向绑定的mvvm框架,也一直再用,那么他到底是如何实现的呢?vue3又针对这点做了哪些升级呢? 这段时间也正好有空,下面我们来一起看看吧 一 、vue的双向绑定原理 那么什么是双向绑定呢 ? 一般我们所指的双向绑定都是指的数据,即当数据发生变化的时候,视图也…

Vue简单使用Echart图表柱形图 vue使用柱形图 vue使用 echart图表柱形图 vue使用柱形图

Vue简单使用Echart图表柱形图 vue使用柱形图 vue使用 echart图表柱形图 vue使用柱形图 1、安装依赖2、页面Demo使用3、效果图 1、安装依赖 官方文档&#xff1a;https://echarts.apache.org/zh/option.html#title 官方在线示例&#xff1a;https://echarts.apache.org/exampl…

SpringCloudAlibaba——Nacos

Nacos是服务注册中心服务配置中心。替换了以前的EurekaConfigBus。 1.Nacos作为服务注册中心 Nacos支持AP和CP模式的转换。 2.Nacos作为服务配置中心 服务要配置两个yml文件&#xff0c;bootstrap.yml和application.yml。因为Nacos同springcloud-config一样&#xff0c;在项…

4S店汽车行业万能通用小程序源码系统 在线预约试驾+购车计算器 源码完全开源可二次开发

随着互联网技术的发展和普及&#xff0c;越来越多的消费者开始依赖于互联网进行消费。传统的汽车销售模式也正在经历着数字化转型&#xff0c;以适应消费者需求的变化。这款小程序源码系统就是为帮助汽车4S店等销售商实现数字化转型而开发的。 以下是部分核心功能的代码模块&a…

OushuDB 专家认证第四期报名开始啦!

OushuDB 专家认证培训第四期今日正式启动&#xff01;本次培训为偶数科技面向生态合作伙伴与客户公开举办的线上培训&#xff0c;旨在共同发展 OushuDB 生态。 报名时间&#xff1a;2023年11月9日9:00—11月30日12:00 报名方式&#xff1a;偶数科技官网&#xff08;点击下方阅…

新“芯”向荣|利用合作科研设计和优化电芯案例探究

利用合作科研设计和优化电芯 锂电行业发展的契机——我国致力于减少二氧化碳的排放&#xff0c;将2050年实现净零排放作为目标。 电池制造商、细分领域专用电芯设计厂商、汽车OEM厂商、电动垂直起降(eVTOL)飞机制造商以及电池材料供应商都投入了大量的资源&#xff0c;寻求电…
最新文章