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