快速上手Pinia! 一个教学项目轻松搞定~

1,260 阅读2分钟

Pinia 是下一代的轻量级状态管理库,拥有以下优点(官网:pinia.esm.dev/):

  • 完整的TypeScript 支持
  • 完整的类型标支持
  • 极其轻巧,体积约1KB
  • Store中的Actions 配置项可以执行同步或异步方法
  • 模块不需要嵌套,可以声明多个Store
  • 支持Vue DevTools, SSR和Webpack 代码拆分

可能会有小伙伴问,我们不是已经有了 Vuex 了吗为什么还要一个新的框架?那么接下来我们来看看Vuex的缺点:

image.png 并且我们再瞅一眼 Vuex5 的 Rfcs 提案: (github.com/vuejs/rfcs/…

image.png

翻译过来就是:

  1. 支持 options api 和 composition api
  2. 没有 mutations,只有 state, getters, and actions
  3. 没有嵌套的模块
  4. 更好 typescript 支持
  5. 自动化的代码差分

我们会发现 Pinia 与 Vuex5 的提案内容极其符合,并且Pinia的作者是 Vuex 核心开发人员之一,诶嘿~这不巧了吗。尤大在前阵子的《前端早早聊》中也亲自点名了 Pinia,说明还有有一定参考价值的。并且现在学习 Pinia 相当于提前学习了 Vuex5 也非常值得。

由于Pinea是轻量级的,体积很小,它适合于中小型应用。它也适用于低复杂度的Vue.js项目。将 Vuex 用于中小型 Vue.js 项目是过度的,因为它重量级的,对性能降低有很大影响。因此,Vuex 适用于大规模、高复杂度的 Vue.js 项目。

为了学习 Pinia,我写了个教学演示的开源项目来进行展示,具体如下: (地址:gitee.com/MTrun/pinia… image.png

数据修改: uTools_1648522584686.png

异步处理: QQ截图20220329105801.png

自定义插件: QQ截图20220329105835.png

gif为: 20211120_171540.gif 此项目已经开源在了码云上,源码部分参考了掘金上的部分文章。这是一个学习pinia非常好使和直观的项目,请务必来看一眼,顺便点个星星谢谢拉

如果小伙伴有兴趣的话,可以一起来参与建设~