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

介绍

首先，这两个都是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。