深入了解Vue Pinia持久化存儲二次封裝

更新時間：2023年12月21日 16:52:36 作者：前端老K

Pinia 是2019年由vue.js官方成員重新設(shè)計的新一代狀態(tài)管理庫,類似Vuex,下面我們就來學(xué)習(xí)一下如何通過Pinia實現(xiàn)持久化存儲的相關(guān)知識,感興趣的小伙伴可以了解下

什么是 Pinia

Pinia 是2019年由vue.js官方成員重新設(shè)計的新一代狀態(tài)管理庫，類似Vuex。這里就不過多介紹，具體Pinia使用方法可以參考 Pinia 主頁。

下面我們一起研究一下基于Pinia開發(fā)的持久化存儲插件

什么是持久化存儲

簡單的說就是瀏覽器緩存與Store之間相互同步；我們在使用常規(guī)的Store存儲的時候，會遇到刷新頁面狀態(tài)庫就會被重置，這讓我們很苦惱；
通常遇到這個問題，我們很容易想到用sessionStorage或者localStorage來存儲相應(yīng)的數(shù)據(jù)，當(dāng)存儲store變多時，就麻煩了，需要寫一堆的廢代碼，不好閱讀也不美觀。

有沒有更好的辦法呢？pinia-plugin-persist 就很好的解決的這個問題；但在實際使用中，發(fā)現(xiàn)一個不方便的地方，該插件是以模塊來存儲的，一個store就是一模塊，有時候我們需要一個一個字段去存，比如登錄我們就只需要存?zhèn)€userInfo字段就行；為了處理類似這種情況在pinia-plugin-persist基礎(chǔ)上進行了升級改造。

相關(guān)源碼

index.d.ts

interface PersistStrategy {
  key?: string
  storage?: Storage
  paths?: string[]
}
interface PersistOptions {
  enabled: true
  strategies?: PersistStrategy[]
}
declare module 'pinia' {
  interface DefineStoreOptionsBase<S, Store> {
    persist?: PersistOptions
  }
}

export { PersistOptions, PersistStrategy }

pinia-store-persist.ts

import { PiniaPluginContext } from 'pinia'
import { PersistStrategy } from '../pinia-persist'

type Store = PiniaPluginContext['store']
type PartialState = Partial<Store['$state']>

// 更新本地緩存
export const updateStorage = (strategy: PersistStrategy, store: Store) => {
  const storage = strategy?.storage || sessionStorage
  const paths = strategy?.paths || []
  if (strategy.key) {
    // 判斷是否按照模塊緩存
    const state = paths.reduce((obj, key) => {
      obj[key] = store.$state[key]
      return obj
    }, {} as PartialState)
    storage.setItem(strategy.key, JSON.stringify(state))
  } else {
    // 單個緩存
    paths.forEach((key) => {
      const state = store.$state[key]
      storage.setItem(key, JSON.stringify(state))
    })
  }
}

export default ({ options, store }: PiniaPluginContext): void => {
  // 判斷插件功能是否開啟
  if (options.persist?.enabled) {
    // 默認策略實例
    const defaultStrategy = [
      {
        key: store.$id,
        storage: sessionStorage,
        paths: []
      }
    ]

    const strategies = options.persist?.strategies?.length ? options.persist?.strategies : defaultStrategy

    strategies.forEach((strategy) => {
      const storage = strategy?.storage || sessionStorage
      const paths = strategy?.paths || []
      if (strategy.key) {
        const result = storage.getItem(strategy.key)
        result && store.$patch(JSON.parse(result))
      } else {
        paths.forEach((key) => {
          const result = storage.getItem(key)
          if (result) {
            const obj: { [key: string]: any } = {}
            obj[key] = JSON.parse(result)
            // 同步更新store數(shù)據(jù)
            store.$patch(obj)
          }
        })
      }
    })

    // 監(jiān)聽state變化，同步更新storage
    store.$subscribe(() => {
      strategies.forEach((strategy) => {
        updateStorage(strategy, store)
      })
    })
  }
}

引入

store/index.ts

import { createPinia } from 'pinia'
import piniaStorePersist from '@/plugins/pinia-persist/pinia-store-persist'

const store = createPinia().use(piniaStorePersist)

export default store

使用

export const CommonStore = defineStore('common', {
  //...
  persist: {
    enabled: true,
    strategies: [
      {
        storage: localStorage,
        paths: ['userInfo']
      }
    ]
  }
})

到此這篇關(guān)于深入了解Vue Pinia持久化存儲二次封裝的文章就介紹到這了,更多相關(guān)Vue Pinia存儲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: