如何持久化存储你的Pinia状态
更新时间：2025年07月27日 15:21:11 作者：清风徐来QCQ
createPersistedState是Pinia插件,用于持久化存储状态数据,通过localStorage/sessionStorage实现页面刷新后数据保留,适用于登录信息、主题设置等场景,需在main.ts注册并配置store开启
createPersistedState 是 Pinia 的一个插件，用于持久化存储你的 Pinia 状态（state），让数据在页面刷新或关闭后依然保留（通常存储在 localStorage 或 sessionStorage）。
作用
- 让用户登录信息、主题设置等在刷新页面后不会丢失。
- 自动把 Pinia 的 state 存到本地存储，再自动恢复。
使用方法
- 安装插件（如果没装）：
npm install pinia-plugin-persistedstate
- 在 main.ts 里引入并注册：
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)- 在你的 store 里开启持久化：
export const useUserStore = defineStore('user', {
state: () => ({
username: '',
token: ''
}),
persist: true // 一行即可开启持久化
})结果
这样你在 Pinia 里的数据就会自动保存到 localStorage，刷新页面后依然存在。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.js中methods watch和computed的区别示例详解
methods,watch和computed都是以函数为基础的,但各自却都不同,这篇文章主要给大家介绍了关于vue.js中methods watch和computed区别的相关资料,需要的朋友可以参考下2021-08-08
今天小编就为大家分享一篇在Vue methods中调用filters里的过滤器实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
随着 Vue.js 在前端开发中的普及,如何高效地将 Vue 项目部署到生产环境成为了开发者关注的重点,本文将详细解析 Vue.js 生产环境文件的使用方法、优缺点以及优化策略,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue中的父子传值双向绑定及数据更新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了Vue父子组件传值的一些坑，帮助大家更好的理解和使用vue父子组件，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了整理项目中vue.config.js打包优化,包括配置 webpack-bundle-analyzer 插件查看文件大小及配置compression-webpack-plugin 用gzip压缩打包的文件大小，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-02-02
vue在解析我们的组件时， 是通过打包成一个 js 文件，当我们的一个组件 引入过多子组件是，页面的首屏加载时间 由最后一个组件决定 优化的一种方式就是采用异步组件，这篇文章主要介绍了Vue3 异步组件 suspense,需要的朋友可以参考下2022-12-12
下面小编就为大家分享一篇vue-cli webpack2项目打包优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了Vue watch侦听器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最新评论