Pinia實(shí)現(xiàn)數(shù)據(jù)持久化存儲實(shí)踐
更新時間：2025年07月27日 15:12:46 作者：琢鳴
安裝pinia-plugin-persist插件,引入并掛載后啟用數(shù)據(jù)緩存（默認(rèn)存入sessionStorage）,可通過paths自定義持久化字段,未指定的state將不進(jìn)行緩存
一.安裝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即表示開啟數(shù)據(jù)緩存
export const useUserStore = defineStore({id: 'userId',
state: () => {
return {
userInfo:{
name:'Ghmin',
age:18,
sex:'男'
},
id:'666666'
}
},
// 開啟數(shù)據(jù)緩存
persist: {
enabled: true
}
})這個時候數(shù)據(jù)默認(rèn)是存在sessionStorage 里，需要修改的話如下：
persist: {
enabled: true,
strategies: [
{
key: 'userInfo',//設(shè)置存儲的key
storage: localStorage,//表示存儲在localStorage
}
]
}默認(rèn)所有 state 都會進(jìn)行緩存,如果你不想所有的數(shù)據(jù)都持久化存儲，那么可以通過 paths 指定要長久化的字段，其余的字段則不會進(jìn)行長久化，如下:
persist: {
enabled: true,
strategies: [
{
storage: localStorage,
paths: ['id'],//指定要長久化的字段
}
]
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue2.x的虛擬DOM diff原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue中的自定義屬性并獲得屬性的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue components 動態(tài)組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue computed計(jì)算屬性的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了淺談關(guān)于iview表單驗(yàn)證的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了input組合事件如何監(jiān)聽輸入中文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
elmentui是一款為vue設(shè)計(jì)的桌面組件庫,下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序
這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開發(fā)流程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09