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'],//指定要长久化的字段
}
]
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Vue2.x的虚拟DOM diff原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue中的自定义属性并获得属性的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
Vue3 + elementplus实现表单验证+上传图片+ 防止表单重复提交功能
这篇文章主要介绍了Vue3 + elementplus 表单验证+上传图片+ 防止表单重复提交,本文给大家展示效果图和完整代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue components 动态组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要为大家详细介绍了Vue computed计算属性的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了input组合事件如何监听输入中文示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论