Vue3 状态管理 - Pinia，超详细讲解！

news2024/11/26 14:39:13

前言：

哈喽，大家好，我是前端菜鸟的自我修养！今天给大家分享【Vue3 状态管理 - Pinia】，超详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎收藏+关注哦 💕

🌈🌈文章目录

前言：

1. Pinia介绍

2. 手动添加Pinia到Vue项目

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

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

3. Pinia基础使用

1.定义store

2.组件使用store

4. getters实现

5. action异步实现

6. storeToRefs工具函数

7. Pinia的调试

8. Pinia持久化插件

1.安装插件 pinia-plugin-persistedstate

2.使用 main.js

3.配置 store/counter.js

1. Pinia介绍

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

2. 手动添加Pinia到Vue项目

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

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

  npm init vite@latest

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

3. Pinia基础使用

1.定义store

2.组件使用store

4. getters实现

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

5. action异步实现

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

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

6. storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构

7. Pinia的调试

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

8. Pinia持久化插件

官方文档：Home | pinia-plugin-persistedstate

1.安装插件 pinia-plugin-persistedstate

  
  npm i pinia-plugin-persistedstate

2.使用 main.js

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

3.配置 store/counter.js

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

以上就是pinia的核心知识和重点配置啦，如果小伙伴们还想了解其他配置，推荐pinia官网文档http://pinia.cc/docs/introduction.html