Vue3状态管理-Pinia

目录

1. 什么是Pinia

2. 手动添加Pinia到Vue项目

3. Pinia的基础使用

4. getters实现

5. action异步实现

6. storeToRefs工具函数

7. Pinia的调试

8. Pinia的持久化插件

---

1. 什么是Pinia

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

每个 Store 都是独立的，便于管理。在Pinia中，action既支持同步修改state中的数据、也支持异步修改state中的数据在Pinia中使用computed计算属性函数实现getter函数

2. 手动添加Pinia到Vue项目

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

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

npm init vite@latest

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

3. Pinia的基础使用

定义store.js，然后在store去维护共享数据

在组件中使用store模块的数据

4. getters实现

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

 

@/store/counter.js

import { defineStore } from 'pinia' import { computed, ref } from 'vue' // 定义创建store实例的函数,使用defineStore(仓库的唯一标识, () => { ... })函数 // 仓库的唯一标识一般取为store.js的文件名 // 在箭头函数中定义state、actions、getters export const useCounterStore = defineStore('counter', () => { // 声明数据 state - count const count = ref(100) // 声明操作数据的方法 action (直接就是定义普通函数的方式) const addCount = () => count.value++ const subCount = () => count.value-- // 声明基于数据派生的计算属性 getters (computed) const double = computed(() => count.value * 2) // 声明数据 state - msg const msg = ref('hello pinia') //需要return，然后才能在其他组件中使用 return { count, double, addCount, subCount, msg, } }, { // persist: true // 开启当前模块的持久化 persist: { key: 'hm-counter', // 修改本地存储的唯一标识 paths: ['count'] // 用于指定state中的哪些数据需要被持久化 } })

Son1Com.vue

<script setup> //1.导入useCounterStore函数 import { useCounterStore } from '@/store/counter' //2.调用 useCounterStore() 时，会返回一个 store 实例。 const counterStore = useCounterStore() //3.在模板中用仓库的state、action、getter时，直接和调用对象的属性或方法一样即可使用 </script> <template> <div> 我是Son1.vue - {{ counterStore.count }} - {{ counterStore.double }} <button @click="counterStore.addCount">+</button> </div> </template> <style scoped> </style>

Son2Com.vue

<script setup> import { useCounterStore } from '@/store/counter' const counterStore = useCounterStore() </script> <template> <div> 我是Son2.vue - {{ counterStore.count }} <button @click="counterStore.subCount">-</button> </div> </template> <style scoped> </style> 5. action异步实现

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

接口地址：http://geek.itheima.net/v1_0/channels

请求方式：get

请求参数：无

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

6. storeToRefs工具函数

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

7. Pinia的调试

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

8. Pinia的持久化插件

官方文档：Pinia Plugin Persistedstate

1.安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

2.使用 main.js

import { createApp } from 'vue' import { createPinia } from 'pinia' // 导入持久化的插件 import persist from 'pinia-plugin-persistedstate' import App from './App.vue' const pinia = createPinia() // 创建Pinia实例 const app = createApp(App) // 创建根实例 app.use(pinia.use(persist)) // pinia插件的安装配置 app.mount('#app') // 视图的挂载

3.配置 store/counter.js

import { defineStore } from 'pinia' import { computed, ref } from 'vue' export const useCounterStore = defineStore('counter', () => { ... return { count, doubleCount, increment } }, { persist: true // 开启当前store.js模块的持久化，效果就是会将仓库中的全部state数据存储在本地 })

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