一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

pinia-学习之路 01，介绍与安装

引言

本系列会以我的一个理解，来介绍并开始学习 Pinia。

中间会插入自己所联系到的 乱七八糟 的 知识点。

介绍

Pinia 是主要为 Vue 所打造的状态管理库

提到状态管理库，我们首先会想到 Vuex，为什么不使用 Vuex了呢？是用起来不舒服，不方便了呢？还是说内部有一些不可避免的逻辑不太好呢？还是说新的 API 出来了，更贴切状态管理呢？

例如就像 Vue2 的 Object.defineProperty 不能完全做到响应式，而且遍历对象性能开销较大。而Proxy可以通过劫持整个对象进行来响应式数据处理，很好的解决了defineProperty的一些缺点。

下面简单进行对比，就知道为什么使用Pinia

Pinia

Pinia 于2019年11月开始设计，主要是设计成与 Vue3 相类似的组合式API，就是我们说的Composite API。

Pinia 是有几个关键的设计点

• 是适用于 Vue2 和 Vue3

• 取消 Mutations，仅仅支持 State，Getters，Actions

  • 这意味着我们该数据，就不需要通过 Mutations 来操作了

  • Action 支持 同步 和 异步

• 没有嵌套模块

  • 只有 store 的概念

• 完整支持TS

  • 因为 Vuex 对 TS 的支持不好

我们通过上面对比，可以了解到，在使用 Vuex 中

• 我们在对数据改变时，需要考虑同步还是异步

• 而且对 TS 的支持不是特别容易

• 最后一点，Composite API是不需要嵌套模块的，此时 Module 就显得无用了。

安装

首先创建目录，先通过 vite 创建 vue3 项目

npm create vite@latest

创建项目名 pinia-pro，之后选择 vue 和 vue-ts即可

之后进入pinia-pro项目中，安装 Pinia，看到 package.json 中出现 Pinia 即可安装成功。

npm i pinia

总结

知道了为什么要学习 Pinia 这个状态管理，和相较于 Vuex 的优缺点，及 Pinia 的安装。