Pinia与Vuex到底哪个好用?什么时候用?

简介: 首先,这两个都是Vue的状态管理库。

介绍

首先,这两个都是Vue的状态管理库。

不过在Vue2的时候,可能大部分都是使用Vuex,而到了Vue3,Pinia就见得多了。

Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

Pinia在整体功能上并不如Vuex强大,但是他对数据的管理非常独特:

Pinia对数据管理有可扩展性、存储模块组织、状态变化分组、多存储创建等特点。

Vuex是Vue核心团队推荐的状态管理库。

Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Redux相同的流量架构。

Redux是JavaScript的状态管理库。

网络异常,图片无法展示
|

配置Pinia

Pinia 上手很容易,只需要安装和创建一个store,没有复杂的操作。

yarn add pinia@next
# or with npm
npm install pinia@next

默认版本是与Vue3兼容的,如果你要在Vue2中使用它,你可以查看官方文档。

Pinia是一个围绕Vue 3 Composition API的封装器(Vue 3 Composition API也就是组合式API)。

注意:你不必把它作为一个插件来初始化,除非你需要Vue devtools支持、SSR支持和webpack代码分割的情况。

在全局导入:

import { createPinia } from 'pinia'
app.use(createPinia())

使用我就不多说了,主要讲它与Vuex的区别。

配置Vuex

npm install vuex@next --save
# or with yarn
yarn add vuex@next --save

相比Pinia,Vuex的流程比较复杂,官方提供了一张原理图。

网络异常,图片无法展示
|

状态也是分为了3种。

使用起来相比Pinia也没那么方便,但是Vuex的功能强大。

一轮配置下来,其实配置过程也都差不多。

比较

查阅官方文档,发现Vuex的项目结构非常灵活。

网络异常,图片无法展示
|

什么时候去使用Vuex?

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。

这是官方文档的话语,说的挺好。

它说如果程序较简单,一个简单的store模式就可以满足需求,没必要使用Vuex,但是手动去构建一个store还是比较麻烦,这时候,Pinia轻量的优势就来了,他就是算一个单一的强大的store模式状态管理。

Pinia中文文档也告诉了我们,何时去适应它。

网络异常,图片无法展示
|

Pinia 的社区很小,这导致 Stack Overflow 上的贡献很少,解决方案也很少。

但是现在生态也伴随着Vue3的发展开始完善了。

Vuex 是 Vue.js 核心团队推荐的状态管理库,拥有庞大的社区,核心团队成员做出了重大贡献。 Stack Overflow上很容易找到 Vuex 错误的解决方案。

Pinia在GitHub上的评分也是增长迅速,广受好评。

其余的功能方面比较,掘金社区有更好的文本参考,我就直接截图了:

网络异常,图片无法展示
|

Vuex使用很简单,使用得恰当好处还是不容易的,我想下一篇更新一下如何更好的使用Vuex。

相关文章
|
开发工具 C++ git
《人生苦短,我用python·三》pybind11简单使用
《人生苦短,我用python·三》pybind11简单使用
2405 0
|
数据建模 Linux 数据库
简单实用的数据建模工具PDManer
PDManer是一款开源的国产数据建模工具
15942 1
简单实用的数据建模工具PDManer
|
存储 PyTorch 算法框架/工具
Tensor to img && imge to tensor (pytorch的tensor转换)
Tensor to img && imge to tensor (pytorch的tensor转换)
|
存储 JSON 关系型数据库
【干货满满】解密 API 数据解析:从 JSON 到数据库存储的完整流程
本文详解电商API开发中JSON数据解析与数据库存储的全流程,涵盖数据提取、清洗、转换及优化策略,结合Python实战代码与主流数据库方案,助开发者构建高效、可靠的数据处理管道。
|
4月前
|
SQL 搜索推荐 小程序
如何搭建自动化标签体系:从 15 天缩短至 5 分钟的私域数据实践
手动标签响应慢、数据割裂、触达粗放。本文结合零售集团案例,拆解如何用规则标签、OneID、CDP 与 MA 自动化运营,把标签生产从 15 天压缩到 5 分钟。
|
5月前
|
边缘计算 缓存 安全
网站慢、被攻击、成本高?一文读懂阿里云 ESA 是什么
阿里云ESA(边缘安全加速)集CDN加速、WAF防护与DDoS防御于一体,依托3200+全球边缘节点,显著提升海内外访问速度(实测提升20%–50%),并在边缘层实时拦截攻击,保障源站安全。基础版免费试用,配置简易,5分钟快速接入,适合个人站长、中小企业及出海业务。
|
8月前
|
机器学习/深度学习 人工智能 JSON
让ChatGPT更懂你:深入浅出解析大模型微调中的强化学习(PPO/DPO篇)
本文深入浅出解析大模型对齐人类偏好的两大核心方法:PPO(需训练奖励模型、在线优化,强但复杂)与DPO(直接学习“好vs差”对比数据、离线高效、更易用)。对比原理、流程与实践,揭示为何DPO正成为主流选择,并强调高质量偏好数据与平台化工具的关键价值。(239字)
975 9
让ChatGPT更懂你:深入浅出解析大模型微调中的强化学习(PPO/DPO篇)
|
人工智能 自然语言处理 达摩院
VideoLLaMA3:阿里达摩院开源专注于视觉理解的多模态基础模型,具备多语言视频理解能力
VideoLLaMA3 是阿里巴巴开源的多模态基础模型,专注于图像和视频理解,支持多语言生成、视频内容分析和视觉问答任务,适用于多种应用场景。
1530 6
|
JSON JavaScript 前端开发
Webpack配置详解——这一篇就够用了
Webpack配置详解——这一篇就够用了
Webpack配置详解——这一篇就够用了
|
消息中间件 存储 RocketMQ
2分钟看懂RocketMQ延迟消息核心原理
本文从源码层面解析了RocketMQ延迟消息的实现原理,包括延迟消息的使用、Broker端处理机制以及定时任务对延迟消息的处理流程。
2分钟看懂RocketMQ延迟消息核心原理