Pinia实现数据持久化存储实践
更新时间：2025年07月27日 15:12:46 作者：琢鸣
安装pinia-plugin-persist插件,引入并挂载后启用数据缓存（默认存入sessionStorage）,可通过paths自定义持久化字段,未指定的state将不进行缓存
一.安装pinia-plugin-persist
npm i pinia-plugin-persist --save
二.store/index.ts中引入并挂载
import { createPinia, defineStore } from "pinia";
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store三.使用方法
enabled: true即表示开启数据缓存
export const useUserStore = defineStore({id: 'userId',
state: () => {
return {
userInfo:{
name:'Ghmin',
age:18,
sex:'男'
},
id:'666666'
}
},
// 开启数据缓存
persist: {
enabled: true
}
})这个时候数据默认是存在sessionStorage 里，需要修改的话如下：
persist: {
enabled: true,
strategies: [
{
key: 'userInfo',//设置存储的key
storage: localStorage,//表示存储在localStorage
}
]
}默认所有 state 都会进行缓存,如果你不想所有的数据都持久化存储，那么可以通过 paths 指定要长久化的字段，其余的字段则不会进行长久化，如下:
persist: {
enabled: true,
strategies: [
{
storage: localStorage,
paths: ['id'],//指定要长久化的字段
}
]
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了react和vue的事件处理差异,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了前端 Vue.js 和 MVVM 详细介绍的相关资料,需要的朋友可以参考下2016-12-12
下面小编就为大家分享一篇解决vue-cli创建项目的loader问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看看吧2018-03-03
Vue使用vue-draggable 插件在不同列表之间拖拽功能
这篇文章主要介绍了使用vue-draggable 插件在不同列表之间拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
本文主要探讨了 Vue 3 中父子组件之间的通信方式,包括父传子,通过props传递数据和方法；子传父,用emit触发自定义事件并传递数据；还介绍了使用ref直接操作子组件实例,借助defineExpose暴露子组件的属性和方法给父组件,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vue实现兄弟组件间的联动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
Vue el-table表格第一列序号与复选框hover切换方式
这篇文章主要介绍了Vue el-table表格第一列序号与复选框hover切换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了解决vue过滤器filters获取不到this对象的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了Vue nextTick的原理解析，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了Vue事件总线的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
最新评论