Vue3+Pinia 状态管理持久化
一、Pinia 简介
🎖️Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。Vue3+Vite+Pinia 新三剑客逐渐替代了Vue2+Webpack+Vuex 了，性能啥的各方面吊打。
1.1 什么是状态管理？
🎯全局状态 Store (如Vuex、 Pinia) 是一个保存状态和业务逻辑的实体，与组件树没有绑定，有点像一个永远存在的组件，每个组件都可以读取和写入它。
1.2 状态管理三大核心概念
- 🥇state 属性 —— 相当于组件中的 data
- 🥈getter 计算属性 —— 相当于组件中的 computed
- 🥉action 操作属性的行为 —— 相当于组件中的 methods
1.3 什么时候使用 Store?
Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods 。
1.4 应该在什么时候使用 Store?
一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。
另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。
并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。
1.5 什么时候不应该使用 Store?
有的时候我们会过度使用 store 。如果觉得应用程序的 store 过多，你可能需要重新考虑使用 store 的目的。例如其中一些逻辑应该只是组合式函数，或者应该只是组件的本地状态。这在 Mastering Pinia 的 (不要) 滥用 store 课程中有详细介绍。
1.6 为什么你应该使用 Pinia？
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。
二、状态持久化（避免刷新页面后状态丢失）
2.1 安装插件 pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate2.2 导入启用
📌 在 src/main.ts 文件配置
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(
createPersistedState({
// 所有 Store 都开启持久化存储
auto: true
})
)
app.use(pinia)
2.3 配置关闭持久化
🔌 针对需要关闭持久化的 store ，添加配置
{
persist: false
}详细范例如下： src/stores/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore(
'counter',
() => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
},
// 关闭持久化
{
persist: false
}
)
当然，也可以默认全局不启用持久化
// src/main.ts 中
pinia.use(
createPersistedState({
auto: false
})
)只针对部分 store 开启持久化
// 开启持久化（目标 store 中）
{
persist: true
}2.4 自定义持久化
如果你想要自定义持久化的行为，比如指定要持久化哪些状态或者使用其他存储方式（如IndexedDB），你可以在创建 pinia 时传递配置：
// store.js
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist({
storage: localStorage, // 默认为localStorage，你也可以使用sessionStorage或其他
paths: ['myStoreName'], // 指定要持久化的store
ttl: 60 * 60 * 24, // 数据存活时间（秒），默认为一天
}))
export default pinia这样，你就可以在Vue 3应用中使用Pinia来管理状态，并且这些状态将自动保存和恢复。
原文地址：https://blog.csdn.net/mss359681091/article/details/144353223
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！