vue3中pinia的使用总结 _生活百科

pinia的简介和优势：
Pinia是Vue生态里Vuex的代替者，一个全新Vue的状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia 。那先来看看Pinia比Vuex好的地方，也就是Pinia的五大优势。

可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia 。
抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。
代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦， Vue3的Composition api完美了解决这个问题。可以实现代码自动分割，pinia也同样继承了这个优点。

如果你说这五点有点太多了，记不住。可以简单总结Pinia的优势就是，更加简洁的语法，完美支持Vue3的Composition api 和对TypesCcript的完美支持。这些优势和尤雨溪的强烈推荐，个人觉得很快Pinia就会完全取代Vuex，成为最适合Vue3的状态管理库。
这里说一点哦，其实pinia的开发团队，就是Vuex的开发团队。
Vue3环境安装
明白了Pinia的优势后，下一步我们就需要安装开发环境了。Pinia是Vue的状态管理库，所以需要先安装Vue的项目环境。这里需要说一下Pinia同时支持Vue2和Vue3，但这里我就用Vite来创建一个Vue3项目为例。
使用Vite就需要先初始化vite ，一条命令搞定。

文章插图
如果是第一次安装，会提示你安装对应的packages
Pinia的安装
安装好Vue3的开发环境后，就可以安装Pinia状态管理库了。安装的方法依然是使用npm 来安装。

文章插图
然后可以在package.json文件中查看pinia的版本
Pinia的使用步骤
(1). 在main.ts里面引入pinia:
安装好Pinia后，需要作的第一件事就是在/src/main.ts里引入pinia 。这里我们直接使用import引入

文章插图
引入后，通过createPinia( )方法，得到pinia的实例和挂载到Vue根实例上。为了方便你学习，这里直接给出main.ts的全部代码。

文章插图
这样我们就在项目中引入了Pinia,也就是说我们可以在项目中使用它进行编程了。
创建store状态管理库
引入Pinia后，就可以创建状态管理库了，也就是常说的Store 。直接在/src目录下，新建一个store文件夹。有了文件夹之后，再创建一个index.ts文件。
这个文件里的代码，我们一般只做三件事。