【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用
为什么需要持久化？
刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。
在实际开发中，浏览器刷新时，有些数据希望是保存下来的。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了。
要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如 cookie、localStorage、sessionStorage 。每次初始化状态时从存储中去获取初始值即可。
说起来思路很简单，可真正实现起来就各种问题了，所以咱们就使用 pinia 的插件 pinia-plugin-persistedstate 来实现。
pinia-plugin-persistedstate
- 安装依赖
npm install pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate
- 引入该插件，在创建 pinia 实例时传入该插件
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia
- 在需要持久化状态的模块（modules）中设置 persist
...
const useUserStore = defineStore('user', () => {
...
}, {
key: 'user', // Key 用于引用 storage 中的数据
storage: sessionStorage // 将数据持久化到的 storage 中
// 更多配置请参考官方文档
})
参考链接
Pinia 数据持久化储存（pinia-plugin-persistedstate）
Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用
