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-persistedstate2.使用 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.其他配置，看官网文档即可