Vue2向Vue3过度Vue3状态管理工具Pinia

- 日理万妓 2024-03-24 21:58 48阅读 0赞

#### 目录 ####

*   *  1. 什么是Pinia
     *  2. 手动添加Pinia到Vue项目
     *  3. Pinia基础使用
     *  4. getters实现
     *  5. action异步实现
     *  6. storeToRefs工具函数
     *  7. Pinia的调试
     *  8. Pinia持久化插件

--------------------

### 1. 什么是Pinia ###

![在这里插入图片描述][6d311562109e493abeeff50310e3e1c4.png]

Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品

![在这里插入图片描述][cb320c004e62447badae7f213997ef73.png]

### 2. 手动添加Pinia到Vue项目 ###

后面在实际开发项目的时候，Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始：

1.  使用 Vite 创建一个空的 Vue3项目

npm init vite@latest

1.  按照官方文档安装 pinia 到项目中

### 3. Pinia基础使用 ###

1.  定义store
2.  组件使用store

![在这里插入图片描述][9ca21b89c9bf40bdb907bbd684b79a6a.png]

### 4. getters实现 ###

Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去

![在这里插入图片描述][7044e155b7e344898e4a751150e69850.png]

### 5. action异步实现 ###

方式：异步action函数的写法和组件中获取异步数据的写法完全一致

*  接口地址：http://geek.itheima.net/v1\_0/channels
 *  请求方式：get
 *  请求参数：无

![在这里插入图片描述][c55abfd1425b4b338be77efb1401b8fb.png]

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中  
![在这里插入图片描述][5fe7e61f9d3f45e6b4b321073906adaa.png]

### 6. storeToRefs工具函数 ###

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构  
![在这里插入图片描述][1c23cc4d8cc94e8198394dfce176553a.png]

### 7. Pinia的调试 ###

Vue官方的 dev-tools 调试工具 对 Pinia直接支持，可以直接进行调试

![在这里插入图片描述][4412faa813134c60939dcf3daaed3cce.png]

### 8. Pinia持久化插件 ###

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1.  安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

1.  使用 main.js

import persist from 'pinia-plugin-persistedstate'
    ...
    app.use(createPinia().use(persist))

1.  配置 store/counter.js

import { defineStore } from 'pinia'
    import { computed, ref } from 'vue'
    
    export const useCounterStore = defineStore('counter', () => {
      ...
      return {
        count,
        doubleCount,
        increment
      }
    }, {
      persist: true
    })

1.  其他配置，看官网文档即可

[6d311562109e493abeeff50310e3e1c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/f8606de8902e4d38b0e29dea2131c384.png
[cb320c004e62447badae7f213997ef73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/28471316d75d45b29bb21f7dcfde2ec6.png
[9ca21b89c9bf40bdb907bbd684b79a6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8118f89491f248cba08b4dca5af3d3da.png
[7044e155b7e344898e4a751150e69850.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9e309574786747dbb9338941b621dbeb.png
[c55abfd1425b4b338be77efb1401b8fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a8c1afbb878a43be89f804274a1b1e77.png
[5fe7e61f9d3f45e6b4b321073906adaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/029c080724774289acb13c7f48946289.png
[1c23cc4d8cc94e8198394dfce176553a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d9501632fbbf40aea14eaa4e6cd52d9e.png
[4412faa813134c60939dcf3daaed3cce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7e31b3918bff4f1e9db679d93aa70797.png