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修改状态数据的多种方式