一、什么是 Pinia
Pinia 是下一代的轻量级状态管理库,拥有以下优点(官网:https://pinia.esm.dev/):
- 完整的TypeScript 支持
- 完整的类型标支持
- 极其轻巧,体积约1KB
- Store中的Actions 配置项可以执行同步或异步方法
- 模块不需要嵌套,可以声明多个Store
- 支持Vue DevTools, SSR和Webpack 代码拆分
可能会有小伙伴问,我们不是已经有了 Vuex 了吗为什么还要一个新的框架?那么接下来我们来看看Vuex的缺点:
并且我们再瞅一眼 Vuex5 的 Rfcs 提案:https://github.com/vuejs/rfcs/pull/271
翻译过来就是:
- 支持 options api 和 composition api
- 没有 mutations,只有 state, getters, and actions
- 没有嵌套的模块
- 更好 typescript 支持
- 自动化的代码差分
我们会发现 Pinia 与 Vuex5 的提案内容极其符合,并且Pinia的作者是 Vuex 核心开发人员之一,诶嘿~这不巧了吗。尤大在前阵子的《前端早早聊》中也提到了 Pinia,所以现在学习 Pinia 相当于提前学习了 Vuex5 还是非常值得的。
为了学习 Pinia,我写了个教学演示的开源项目来进行展示,具体如下:
(地址:https://gitee.com/MTrun/pinia-demonstration)
gif为:
此项目已经开源在了码云https://gitee.com/MTrun/pinia-demonstration上,源码部分参考了掘金上的部分文章,如果小伙伴有兴趣,可以一起来参与建设~