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,一条命令搞定。
![](https://i-blog.csdnimg.cn/blog_migrate/7575ea0ba5d638649a01eb36177140a4.png)
如果是第一次安装,会提示你安装对应的packages
Pinia的安装
安装好Vue3的开发环境后,就可以安装Pinia状态管理库了。安装的方法依然是使用npm 来安装。
![](https://i-blog.csdnimg.cn/blog_migrate/912c26e2ca2ad1bb41b3ac4152b50738.png)
然后可以在package.json文件中查看pinia的版本
Pinia的使用步骤
(1). 在main.ts里面引入pinia:
安装好Pinia后,需要作的第一件事就是在/src/main.ts里引入pinia。 这里我们直接使用import引入
![](https://i-blog.csdnimg.cn/blog_migrate/9083766d97964db8154ac2b5cfb72bba.png)
引入后,通过createPinia( )方法,得到pinia的实例和挂载到Vue根实例上。为了方便你学习,这里直接给出main.ts的全部代码。
![](https://i-blog.csdnimg.cn/blog_migrate/4477b8124cc207bce7d30ed322289ecf.png)
这样我们就在项目中引入了Pinia,也就是说我们可以在项目中使用它进行编程了。
创建store状态管理库
引入Pinia后,就可以创建状态管理库了,也就是常说的Store。直接在/src目录下,新建一个store文件夹。有了文件夹之后,再创建一个index.ts文件。
这个文件里的代码,我们一般只做三件事。
定义状态容器(仓库)
修改容器(仓库)中的 state
仓库中的 action 的使用
明确了这四件事以后,我们来编写代码。先来定义容器,这个写法是固定的,你甚至可以在VSCode中定义一个代码片段,以后用到的时候,直接可以生成这样的代码。
因为这里是学习,所以我这里就从头写一下。
![](https://i-blog.csdnimg.cn/blog_migrate/80e4ea2c1e02df4e1c417f18d34b6eaa.png)
写完这段代码,你会感觉这个很像一个Vue的小组件,这也算是Pinia的一个优点
defineStore( )方法的第一个参数:相当于为容器起一个名字。注意:这里的名字必须唯一,不能重复。这个是官方特别说明的一个事情。
defineStore( )方法的第二个参数:可以简单理解为一个配置对象,里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
state 属性:用来存储全局的状态的,这里边定义的,就可以是为SPA里全局的状态了。
getters属性:用来监视或者说是计算状态的变化的,有缓存的功能。
actions属性:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。
如果你会Vuex的话,上面这些内容可能对你来说没什么难度。但如果你不会Vuex,现在只要知道这段代码大概的意思就可以,不用深究。随着我们学习的深入,你会有更具体的了解。
![](https://i-blog.csdnimg.cn/blog_migrate/39eeed3e0b669e4d0d25c0e64674af73.png)
在vue3组件里面 读取store数据
在vue文件中引入store,然后通过store得到store实例
![](https://i-blog.csdnimg.cn/blog_migrate/b7a1472ebcce557841603463feda7689.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b378e8a4a74f94991ae8d5c5d83a299b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8251ba375f5c32c7d1a061e96936881d.png)
Pinia改变状态数据和注意事项
我在学习的时候发现了这样一个坑,在这里也和大家分享一下。希望小伙伴们不要踩坑。看下面的代码,我们是否可以简化一点。
![](https://i-blog.csdnimg.cn/blog_migrate/f5dfb1f50965648c6efdb41c4d604fd0.png)
我们可以把store进行结构,然后直接template中直接这样读出数据。
![](https://i-blog.csdnimg.cn/blog_migrate/969802cbdeaba6bff3c7461bea61d140.png)
这样看似简单,但通过解构的数据,只有一次作用,不是响应式数据(这就是我踩的坑了)。也就是说当你改变数据状态时,解构的状态数据不会发生变化。我们这时候再点击增加按钮,可以看到只有没结构的数据发生了变化。
于是我开始查找官方文档,显然Pinia团队也发现了这个问题,提供了storeToRefs( )方法。这个方法Pinia中,所以我们先用import引入。
![](https://i-blog.csdnimg.cn/blog_migrate/6a4a8ea3c7425189e274da2390ca9f4b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/660742424636ef3b0f7378c8a00d947a.png)
这时候再到浏览器中测试一下,就一切正常了。补充:其实在Vuex中,直接解构数据也是不可以的。
Pinia修改状态数据的多种方式
1.普通方式修改数据
![](https://i-blog.csdnimg.cn/blog_migrate/19eaa18230078c859b8a156d5c1bbb12.png)
2.$patch修改数据(修改多条建议使用) $patch的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处
![](https://i-blog.csdnimg.cn/blog_migrate/ec767bdcb0458d0287e535776250e463.png)
3.$patch加函数的方式修改数据(这种方法适合复杂数据的修改,比如数组、对象的修改。)
![](https://i-blog.csdnimg.cn/blog_migrate/d51fceb9a36987508be582f0c57c4f4e.png)
4.在actions中写好逻辑,在调用actions
如果你有一个修改的过程非常复杂,你可以先在store里,定义好actions中的函数,然后在组件里再调用函数。
![](https://i-blog.csdnimg.cn/blog_migrate/d9d96265f1ba50df57b2d24b070b3c7e.png)
在vue中使用
![](https://i-blog.csdnimg.cn/blog_migrate/4a2042409f5b0805d19133b8ca959b6b.png)
5.在pinia中使用Getters
Pinia中的Getter和Vue中的计算属性几乎一样,就是在获取State的值时作一些处理。比如我们有这样一个需求,就是在state里有有一个状态数据是电话号码,我们想输出的时候把中间四位展示为****.这时候用getters就是非常不错的选择。
![](https://i-blog.csdnimg.cn/blog_migrate/8de722b04830e199f3bf611c84173685.png)
在vue中使用它
![](https://i-blog.csdnimg.cn/blog_migrate/bd73e0a05fdd1fa2b0e6dce419d94ac4.png)
Getters是有缓存特性的,现在我们的组件中调用多次,但是在store仓库中其实就调用了一次。
6.this的使用
在actions里面是可以使用this的,其实在getters里面也是可以使用的,使用方式如下:
![](https://i-blog.csdnimg.cn/blog_migrate/2853cdff23a1e664327c03654858ebae.png)
7.pinia中的store是可以相互调用的
![](https://i-blog.csdnimg.cn/blog_migrate/ce0e953114b4f4408b07a24ea176de93.png)