【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用

为什么需要持久化？

刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。

在实际开发中，浏览器刷新时，有些数据希望是保存下来的。如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了。

要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如 cookie、localStorage、sessionStorage 。每次初始化状态时从存储中去获取初始值即可。

说起来思路很简单，可真正实现起来就各种问题了，所以咱们就使用 pinia 的插件 pinia-plugin-persistedstate 来实现。

pinia-plugin-persistedstate

插件官方文档

1. 安装依赖

npm install pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate

1. 引入该插件，在创建 pinia 实例时传入该插件

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

1. 在需要持久化状态的模块(modules)中设置 persist

...
const useUserStore = defineStore('user', () => {
    ...
}, {
   key: 'user', // Key 用于引用 storage 中的数据
   storage: sessionStorage // 将数据持久化到的 storage 中
   // 更多配置请参考官方文档
})

参考链接

Pinia 数据持久化储存(pinia-plugin-persistedstate)Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用