vue3中pinia的使用总结

 

 

pinia的简介和优势：

Pinia是Vue生态里Vuex的代替者，一个全新Vue的状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比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的状态管理库。

这里说一点哦，其实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文件。

这个文件里的代码，我们一般只做三件事。

1. 定义状态容器(仓库)
2. 修改容器(仓库)中的 state
3. 仓库中的 action 的使用

明确了这四件事以后，我们来编写代码。先来定义容器,这个写法是固定的，你甚至可以在VSCode中定义一个代码片段，以后用到的时候，直接可以生成这样的代码。

因为这里是学习，所以我这里就从头写一下。

 

 

 写完这段代码，你会感觉这个很像一个Vue的小组件，这也算是Pinia的一个优点

• defineStore( )方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。这个是官方特别说明的一个事情。
• defineStore( )方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
• state 属性：用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
• getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。
• actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

如果你会Vuex的话，上面这些内容可能对你来说没什么难度。但如果你不会Vuex，现在只要知道这段代码大概的意思就可以，不用深究。随着我们学习的深入，你会有更具体的了解。

 

 

 在vue3组件里面 读取store数据

在vue文件中引入store，然后通过store得到store实例

 

 

 

 

 

 

 

 

 Pinia改变状态数据和注意事项

我在学习的时候发现了这样一个坑，在这里也和大家分享一下。希望小伙伴们不要踩坑。看下面的代码，我们是否可以简化一点。

 

 

 我们可以把store进行结构，然后直接template中直接这样读出数据。

 

 

 这样看似简单，但通过解构的数据，只有一次作用，不是响应式数据（这就是我踩的坑了）。也就是说当你改变数据状态时，解构的状态数据不会发生变化。我们这时候再点击增加按钮，可以看到只有没结构的数据发生了变化。

于是我开始查找官方文档，显然Pinia团队也发现了这个问题，提供了storeToRefs( )方法。这个方法Pinia中，所以我们先用import引入。

 

 

 

 

 

 这时候再到浏览器中测试一下，就一切正常了。补充：其实在Vuex中，直接解构数据也是不可以的。

Pinia修改状态数据的多种方式

1.普通方式修改数据

 

 

 

2.$patch修改数据(修改多条建议使用) $patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处

3.$patch加函数的方式修改数据（这种方法适合复杂数据的修改，比如数组、对象的修改。）

 

 4.在actions中写好逻辑，在调用actions

如果你有一个修改的过程非常复杂，你可以先在store里，定义好actions中的函数，然后在组件里再调用函数。

在vue中使用

 

 

 5.在pinia中使用Getters

Pinia中的Getter和Vue中的计算属性几乎一样，就是在获取State的值时作一些处理。比如我们有这样一个需求，就是在state里有有一个状态数据是电话号码，我们想输出的时候把中间四位展示为****.这时候用getters就是非常不错的选择。

 

 在vue中使用它

 

 

 Getters是有缓存特性的，现在我们的组件中调用多次，但是在store仓库中其实就调用了一次。

6.this的使用

在actions里面是可以使用this的，其实在getters里面也是可以使用的，使用方式如下：

 

 7.pinia中的store是可以相互调用的

 

 以上就是对pinia使用的总结啦！

参考文献地址: https://i.cnblogs.com/posts/edit