vue3中pinia的数据持久化

一、安装插件

npm i pinia-plugin-persistedstate

二、注册

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import './style.css'

import App from './App.vue'

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate)

const app = createApp(App)

app.use(pinia)

app.mount('#app')

三、使用

(1)注意:使用pinia仓库的地方要配置久化,(默认是sessionStorage关闭页签数据就没有了)

// 持久化配置

persist: {

key: 'counter-data',

storage: sessionStorage,

},

四、页面使用

持久化插件地址:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

相关推荐
濮水大叔38 分钟前
函数式与对象式:前端架构的两种成本曲线
vue.js·react.js·函数式编程
vx_Biye_Design2 小时前
django房屋租赁推荐系统78455-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·课程设计·express
林恒smileZAZ2 小时前
浏览器为什么加载不了超大图片
前端·vue.js·html5
Java后端的Ai之路7 小时前
前端技术Vue-13-安装webpack与vuejs
前端·vue.js·webpack
倚窗听花_7 小时前
IIS部署前端Vue项目
前端·javascript·vue.js
u0111026758 小时前
Vue 3 统一右侧编辑面板:布局、滚动与底部操作区设计
javascript·vue.js·ecmascript
change_fate8 小时前
Vue 3 Composable 函数指南
前端·javascript·vue.js
tryCbest9 小时前
Vue3——第 9 篇:组件通信全攻略(下)——Provide / Inject 与事件总线
前端·javascript·vue.js
溪语流沙10 小时前
【Web全栈进阶】Nginx反向代理 + HTTPS:正式上线
前端·vue.js·python·nginx·https·fastapi
夕阳_醉了11 小时前
让 AI 回答“打字般”浮现:用 Vue 3 + DeepSeek 实现流式聊天
前端·vue.js·人工智能