快捷導(dǎo)航

Pinia實(shí)現(xiàn)數(shù)據(jù)持久化存儲(chǔ)實(shí)踐

更新時(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
  }
})

這個(gè)時(shí)候數(shù)據(jù)默認(rèn)是存在sessionStorage 里，需要修改的話如下：

persist: {
  enabled: true,
  strategies: [
    {
      key: 'userInfo',//設(shè)置存儲(chǔ)的key
      storage: localStorage,//表示存儲(chǔ)在localStorage
    }
  ]
}

默認(rèn)所有 state 都會(huì)進(jìn)行緩存,如果你不想所有的數(shù)據(jù)都持久化存儲(chǔ)，那么可以通過 paths 指定要長(zhǎng)久化的字段，其余的字段則不會(huì)進(jìn)行長(zhǎng)久化，如下:

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['id'],//指定要長(zhǎng)久化的字段
    }
  ]
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入理解Vue2.x的虛擬DOM diff原理
本篇文章主要介紹了Vue2.x的虛擬DOM diff原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
vue中的自定義屬性并獲得屬性的值方式
這篇文章主要介紹了vue中的自定義屬性并獲得屬性的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10
vue components 動(dòng)態(tài)組件詳解
這篇文章主要介紹了vue components 動(dòng)態(tài)組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
Vue computed計(jì)算屬性的使用方法
這篇文章主要為大家詳細(xì)介紹了Vue computed計(jì)算屬性的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
淺談關(guān)于iview表單驗(yàn)證的問題
這篇文章主要介紹了淺談關(guān)于iview表單驗(yàn)證的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
詳解input組合事件如何監(jiān)聽輸入中文
這篇文章主要為大家介紹了input組合事件如何監(jiān)聽輸入中文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
解決vue3使用element-ui的具體操作
elmentui是一款為vue設(shè)計(jì)的桌面組件庫(kù),下面這篇文章主要給大家介紹了關(guān)于解決vue3使用element-ui的具體操作,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
Element Card 卡片的具體使用
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序
這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開發(fā)流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09