新的好朋友Pinia，引领状态管理新时代

Pinia 是 Vue.js 的轻量级状态管理库，非常的受广大开发者的欢迎，尤大大更是强力推荐。

Pinia作为Vue生态里Vuex的替代者，全新的Vue状态管理库，它的优势有哪些？比起Vuex好在哪些地方呢？我们就先来看看pinia的五大优势。

1. 可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。

2. 抛弃了Mutations的操作，只有state、getters和actions.极大简化了状态管理库的使用，让代码编写更加容易直观。

3. 不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。

4. 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。

5. 代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美的解决这个问题。可以实现代码自动分割，pinia也同样继承了这个优点。

简单的来说Pinia的优点就是，更加简洁的语法，完美支持Vue3的Composition api 和 对TypesCcript的完美支持。这些优势和尤大神的强力推荐，感觉Pinia取代Vuex在Vue3中大显神威的时代不远了。要抓紧时间上车拥抱它了。

Vue3环境安装

Pina是Vue的状态管理，所以需要安装vue的环境。虽然pinia适用于vue2和vue3，但vue3更能体现pinia的优点以及在ts中的使用情况，所以这里用vue3项目为例。

使用vue3就采用vite方案了，如果你对vite不熟悉可以看这做个简单了解《有了Vite，还需要Webpack吗？》《一起来揭开Vue.js的One Piece神秘面纱》《React也可以使用Vite了，Vite或将替代Webpack》，如果你还坚定用webpack可以自己试下，这里就不做介绍了，也可以加QQ或微信前端技术群沟通交流。

这里我们就用vite初始化一个vue项目，到项目目录用命令行

npm init vite@latest

如果第一次安装会提示

输入y就会到输项目名字的地方

然后到框架选择，选择vue

然后会提示是否选择ts，这里我们采用ts的方式，ts已成为一个趋势，如果不了解，也是要去拥抱的

最后会得到

然后跟着提示操作，切换目录安装依赖，一个vite的vue-ts项目就好了，下边我们就开始对pinia使用的操作。

Pinia小例子

首先，安装pinia

npm install pinia# or with yarnyarn add pinia

然后，想看的是否安装上的可以在package.json中查看

如果你看到的时间比较晚，pinia的版本可能也会有较大差异和使用的更新变化，也可以根据这里的版本号安装pinia，也可以看pinia的文档以更好掌握最新的动态。

一切准备就绪我们就开始，磨刀霍霍向pinia了。

在main.ts中引入pinia

main.ts相当于js项目中的main.js，这个使用过vue的也都轻车熟路了吧。

创建store状态管理库

用过vuex也都知道一般项目里都会创建store状态管理库，这里在src下创建store文件夹，然后创建index.ts文件。

这个index.ts文件的代码，主要做三件事儿：

1. 定义状态容器(仓库)

2. 修改容器(仓库)中的 state

3. 仓库中的 action 的使用

明确了这些，我们来编写代码，这个代码是固定的格式

写完这段代码就会感觉pinia就像vue的一个小组件，这也算pinia的一个优点吧。

1. defineStore( )方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。这个是官方特别说明的一个事情。

2. defineStore( )方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。

3. state 属性：用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。

4. getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。

5. actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

如果会vuex的话，理解上边的内容也比较容易。如果不会vuex，记住这段话就行，在往后工作学习中会了解的更加具体和深入。

在store中定义state

我们在store中定义一个state，就以helloword为例

在组件中读取使用store的state

在src/components 下创建一个 Hello.vue组件。编写如下代码（这里为了方便学习都用图片，在文章末尾有获取demo的方式）

写好了这个组件后，修改App.vue文件，删除里边无用的代码，只留下如下内容

在这里小编这个代码有个红色波浪线的格式错误提示，内容是

经过查询后，这个是因为vetur这个插件的问题，如果使用vue3-ts或者想对ts更好的支持的话就要把vetur换成更牛的volar

这个相当于是vetur的升级版，vetur的习惯这个也都支持的，更换插件重启后就一切正常了

然后运行项目，就会我们使用的state的内容就显示出来了

用过vuex在这有没有惊讶一下，这样就可以了，不需要之前写一大串了。

修改state

pinia里修改state也很方便，这里先不讲actions，先来看下直接操作。

先在store的state下增加一个count：

然后在Hello.vue组件中增加count的使用

然后，在src/components下创建AddButton.vue组件，然后写下如下代码

最后在App.vue中引入

这样再回到页面，点击按钮就可以实现count的增加了

看到这里，使用过vuex的同学就能看出来，pinia的简洁程度了。

不过上边使用state的方式还是不太美观

我们使用解构的方式来简化下，不过这里有个坑点，如果直接采用解构的方式会导致state不能响应变化，代码如下

不能响应变化就不好了，pinia就提供了一个storeToRefs的方法, 使用方式如下：

这样操作后，state就又恢复响应变化了。

getters和actions

getters的使用

pinia的getters和vuex的getters的计算属性几乎一样，就是在获取state的值时作一些处理，犹豫和vuex的类似这里就不做过多解释了。唯一不同的是在这里边可以使用this，这个也比较好理解，pinia这个store就像一个小组件，能用this也应该的。

actions的使用

在store的actions中，增加修改state的helloWord方法

然后创建modifyHello.vue组件，输入以下内容

输入框输入内容后点击按钮调用actions的方法设置state的值，actions的使用跟state一样，也是直接store来调用的。

END

以上就是对pinia的简单介绍，以及简单例子的，希望对你有帮助，欢迎关注我们，或者加入技术群一起交流学习前端技术。如果想要上方demo项目例子，可以关注公众号后，到微信技术群找群主获取。