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

本文链接：https://blog.csdn.net/IAIPython/article/details/130571249

文章讲述了在Vue应用中使用Pinia进行状态管理时，如何通过pinia-plugin-persistedstate插件实现数据持久化，确保浏览器刷新后仍能保留如用户登录信息等关键状态。安装并引入插件后，在需要持久化的store模块中配置即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么需要持久化？

刷新浏览器后，重新加载页面时会重新初始化 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 中
   // 更多配置请参考官方文档
})