Pinia 是下一代的轻量级状态管理库,拥有以下优点(官网:pinia.esm.dev/):
- 完整的TypeScript 支持
- 完整的类型标支持
- 极其轻巧,体积约1KB
- Store中的Actions 配置项可以执行同步或异步方法
- 模块不需要嵌套,可以声明多个Store
- 支持Vue DevTools, SSR和Webpack 代码拆分
可能会有小伙伴问,我们不是已经有了 Vuex 了吗为什么还要一个新的框架?那么接下来我们来看看Vuex的缺点:
并且我们再瞅一眼 Vuex5 的 Rfcs 提案:
(github.com/vuejs/rfcs/…
)
翻译过来就是:
- 支持 options api 和 composition api
- 没有 mutations,只有 state, getters, and actions
- 没有嵌套的模块
- 更好 typescript 支持
- 自动化的代码差分
我们会发现 Pinia 与 Vuex5 的提案内容极其符合,并且Pinia的作者是 Vuex 核心开发人员之一,诶嘿~这不巧了吗。尤大在前阵子的《前端早早聊》中也亲自点名了 Pinia,说明还有有一定参考价值的。并且现在学习 Pinia 相当于提前学习了 Vuex5 也非常值得。
由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目。将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。
为了学习 Pinia,我写了个教学演示的开源项目来进行展示,具体如下:
(地址:gitee.com/MTrun/pinia…
数据修改:
异步处理:
自定义插件:
gif为:
此项目已经开源在了码云上,源码部分参考了掘金上的部分文章。这是一个学习pinia非常好使和直观的项目,请务必来看一眼,顺便点个星星谢谢拉
如果小伙伴有兴趣的话,可以一起来参与建设~