什么是 Pinia 娄柳？

Pinia 出來這么久了（2019年11月左右）争拐，也有很多的質(zhì)量非常不錯的文章講解關于 Pinia 的基本使用方式搀罢，這里就不再贅述了蝗岖。

一句話總結一下：

方便追蹤與調(diào)試 state，支持 Composition API 定義 store榔至，支持 HMR抵赢，支持 Plugin 擴展

其核心的 defineStore API，讓我覺得它可以摒棄之前 Vuex 的全局集中狀態(tài)管理的思想唧取，利用 Vue 3 的 Composition 特性铅鲤，提供隨處按需定義小型 store 的能力。

這讓我們更加容易編寫和管理很多不同模塊的 store枫弟，提高代碼可讀性邢享，也讓 store 更容易的擴展。

如何持久化淡诗？

在某些特定的單頁面應用場景下骇塘，我們使用常規(guī)的 store 來存儲數(shù)據(jù)，很多時候面臨著刷新就會被重置韩容，所以款违，我們急需一個插件功能來實現(xiàn)對某些特定的數(shù)據(jù)進行狀態(tài)保持。

這里我們很容易想到可以用 sessionStorage 或者 localStorage 來進行相應的處理群凶，但是要對不同的 store 中不同的字段進行處理插爹，也是有很大的心智負擔。

這里我推薦一款 Pinia 的持久化插件：pinia-plugin-persist

他提供了簡便的使用方式以及靈活的配置方式座掘，下面我就和大家分享一下這款插件的使用方式及實現(xiàn)原理递惋。

使用方法

install

# npm
npm install pinia-plugin-persist

# yarn
yarn add pinia-plugin-persist

# pnpm
pnpm add pinia-plugin-persist

setup

Vue 2

import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPersist)

Vue.use(vueCompositionApi)
Vue.use(pinia)

Vue 3

import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPersist)

Typescript definitions

// tsconfig.ts
{
  "compilerOptions": {
    "types": [
      "pinia-plugin-persist"
    ]
  },
}

Usage

源碼即文檔

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

1. 基本使用

import { defineStore } from "pinia"

export const useStore = defineStore("YourStore", () => {
    const foo = ref("foo")
    const bar = ref("bar")
    return { foo, bar }
}, {
    enabled: true
})

開啟 enabled 之后柔滔，默認會對整個 Store 的 state 內(nèi)容進行 sessionStorage 儲存溢陪。

2. 進階用法

strategies 字段說明：

import { defineStore } from "pinia"

export const useStore = defineStore("YourStore", () => {
    const foo = ref("foo")
    const bar = ref("bar")
    return { foo, bar }
}, {
    enabled: true,
    strategies: [{
        // 自定義存儲的 key杉编，默認是 store.$id
        key: "custom storageKey",
        // 可以指定任何 extends Storage 的實例，默認是 sessionStorage
        storage: localStorage,
        // state 中的字段名咆霜，按組打包儲存
        paths: ["foo", "bar"]
    }]
})

storage 屬性可以使用任何繼承自 Storage 協(xié)議的對象邓馒，自定義存儲對象也可以，如下 cookiesStorage 為例

import Cookies from 'js-cookie'

const cookiesStorage: Storage = {
  setItem (key, state) {
    return Cookies.set('accessToken', state.accessToken, { expires: 3 })
  },
  getItem (key) {
    return JSON.stringify({
      accessToken: Cookies.getJSON('accessToken'),
    })
  },
}

export const useStore = defineStore("YourStore", () => {
    const foo = ref("foo")
    const bar = ref("bar")
    const accessToken = ref("xxx")
    return { foo, bar, accessToken }
}, {
    enabled: true,
    strategies: [{
        key: "token",
        storage: cookiesStorage,
        paths: ["accessToken"]
    }]
})

源碼解讀

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

export const updateStorage = (strategy: PersistStrategy, store: Store) => {

  // 默認使用 sessionStorage
  const storage = strategy.storage || sessionStorage
  
  // 默認存儲 key 為 store.$id
  const storeKey = strategy.key || store.$id

  if (strategy.paths) {
  
    // 遍歷 paths 將對應的屬性收集到 finalObj 中
    const partialState = strategy.paths.reduce((finalObj, key) => {
      finalObj[key] = store.$state[key]
      return finalObj
    }, {} as PartialState)
    
    // 執(zhí)行存儲
    storage.setItem(storeKey, JSON.stringify(partialState))
  } else {
  
    // 如果沒有 paths蛾坯，則按整個 store.$state 存儲
    storage.setItem(storeKey, JSON.stringify(store.$state))
  }
}


export default ({ options, store }: PiniaPluginContext): void => {

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

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

    strategies.forEach((strategy) => {
      const storage = strategy.storage || sessionStorage
      const storeKey = strategy.key || store.$id
      const storageResult = storage.getItem(storeKey)

      if (storageResult) {
      
        // 如果 storage 中存在同步數(shù)據(jù)
        store.$patch(JSON.parse(storageResult))
        updateStorage(strategy, store)
      }
    })

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

看完源碼之后，發(fā)現(xiàn)功能其實很簡單脉课，但是其中靈活的 API 設計還是讓我眼前一亮救军，擴展性和定制性也得到了的極大的提升，還是非常值得學習的一個插件倘零。

最后

有了持久化存儲的能力唱遭，我們就可以更愉快的進行數(shù)據(jù)管理啦~

最后附上插件官方文檔地址，不過是純英文的哦