主文件

import type { StateTree } from 'pinia'
import type { PiniaPlugin } from "pinia"
import type {
	PersistedStateFactoryOptions,
	PersistedStateOptions,
} from './types'

function get(state: StateTree, path: Array<string>) {
	return path.reduce((obj, p) => {
		return obj?.[p]
	}, state)
}

function set(state: StateTree, path: Array<string>, val: unknown): StateTree {
	return (
		(path.slice(0, -1).reduce((obj, p) => {
			if (!/^(__proto__)$/.test(p))
				return (obj[p] = obj[p] || {})
			else return {}
		}, state)[path[path.length - 1]] = val),
		state
	)
}

export function pick(baseState: StateTree, paths: string[]): StateTree {
	return paths.reduce((substate, path) => {
		const pathArray = path.split('.')
		return set(
			substate,
			pathArray,
			get(baseState, pathArray)
		)
	}, {})
}

const isObject = (v: unknown): v is Object => typeof v === 'object' && v !== null

export const normalizeOptions = (
	options: boolean | PersistedStateOptions | undefined,
	globalOptions: PersistedStateFactoryOptions,
): PersistedStateOptions => {
	options = isObject(options)
		? options
		: Object.create(null)

	return new Proxy(options as object, {
		get(t, p, r) {
			return (
				Reflect.get(t, p, r) ||
				Reflect.get(globalOptions, p, r)
			)
		}
	})
}


export function piniaStorage(globalOptions: PersistedStateFactoryOptions = {}): PiniaPlugin {
	return function (ctx) {
		{
			const { store, options } = ctx
			// @ts-ignore
			let { openStorage } = options || {}

			if (!openStorage) return

			const {
				paths = null,
				afterRestore,
				beforeRestore,
				serializer = {
					serialize: JSON.stringify,
					deserialize: JSON.parse
				},
				key = store.$id
			} = normalizeOptions(openStorage, globalOptions)

			beforeRestore?.(ctx)

			try {
				// @ts-ignore
				const fromStorage = localStorage.getItem(store.$id)
				if (fromStorage)
					store.$patch(serializer.deserialize(fromStorage))
			} catch (_error) { }

			afterRestore?.(ctx)

			store.$subscribe(
				(_, state) => {
					try {
						const toStore = Array.isArray(paths)
							? pick(state, paths)
							: state
						// @ts-ignore
						localStorage.setItem(
							key,
							serializer.serialize(toStore)
						)
					} catch (_error) { }
				},
				{ detached: true }
			)
		}
	}
}

类型定义

import type { PiniaPluginContext, StateTree } from 'pinia'

type Prettify<T> = { [K in keyof T]: T[K] }

export type StorageLike = Pick<Storage, 'getItem' | 'setItem'>

export interface Serializer {
    /**
     * Serializes state into string before storing
     * @default JSON.stringify
     */
    serialize: (value: StateTree) => string

    /**
     * Deserializes string into state before hydrating
     * @default JSON.parse
     */
    deserialize: (value: string) => StateTree
}

export interface PersistedStateOptions {
    /**
     * Storage key to use.
     * @default $store.id
     */
    key?: string

    /**
     * Dot-notation paths to partially save state. Saves everything if undefined.
     * @default undefined
     */
    paths?: Array<string>

    /**
     * Customer serializer to serialize/deserialize state.
     */
    serializer?: Serializer

    /**
     * Hook called before state is hydrated from storage.
     * @default null
     */
    beforeRestore?: (context: PiniaPluginContext) => void

    /**
     * Hook called after state is hydrated from storage.
     * @default undefined
     */
    afterRestore?: (context: PiniaPluginContext) => void
}

export type PersistedStateFactoryOptions = Prettify<Pick<
    PersistedStateOptions,
    'serializer' | 'afterRestore' | 'beforeRestore'
> & {
    /**
     * Global key generator, allows pre/postfixing store keys.
     * @default storeKey => storeKey
     */
    key?: (storeKey: string) => string

    /**
     * Automatically persists all stores, opt-out individually.
     * @default false
     */
    auto?: boolean
}>

declare module 'pinia' {
    export interface DefineStoreOptionsBase<S extends StateTree, Store> {
        openStorage?: boolean | PersistedStateOptions
    }
}

注册

import { createSSRApp } from "vue";
import * as Pinia from "pinia";

import { piniaStorage } from "@/utils/piniaStorage/plugin"; // 我们编写的持久化插件

export function createApp() {
  const app = createSSRApp(App);
  const store = Pinia.createPinia();
  store.use(piniaStorage());
  app.use(store);
  return {
    app,
    Pinia,
  };
}

使用

import { defineStore } from "pinia";
import { guestCarts } from "@/request/api/address/index";
import { countries, countriesID } from "@/request/api/common/index";
// 创建store,命名规则： useXxxxStore
const useInfoStore = defineStore({
  id: "useInfo",
  state: () => ({
    test: "",
  }),
  getters: {
  },
  actions: {
    setTest(value: any) {
      this.test = value;
    },
  },
  openStorage: true,
});
export default useInfoStore;