117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import type {
|
||
PiniaPlugin,
|
||
PiniaPluginContext,
|
||
StateTree,
|
||
SubscriptionCallbackMutation
|
||
} from 'pinia'
|
||
|
||
import { Logger } from '@/utils/utils'
|
||
|
||
/**
|
||
* Storage类型
|
||
*/
|
||
export interface Storage {
|
||
getItem: (key: string) => any
|
||
setItem: (key: string, value: any) => void
|
||
removeItem: (key: string) => void
|
||
}
|
||
|
||
/**
|
||
* 配置类型
|
||
*/
|
||
export interface Options {
|
||
/**
|
||
* 存储类型，默认为 `window.localStorage`
|
||
*/
|
||
storage?: Storage
|
||
/**
|
||
* 存储的key值，默认为 `pinia`
|
||
*/
|
||
key?: string
|
||
/**
|
||
* 是否开启日志，默认为 `false`
|
||
*/
|
||
logger?: boolean
|
||
activeStores?: Array<string>
|
||
}
|
||
|
||
/**
|
||
* 打印日志
|
||
* @param mutationId
|
||
* @param mutation
|
||
* @param state
|
||
*/
|
||
function logGroup(
|
||
mutationId: string,
|
||
mutation: SubscriptionCallbackMutation<any>,
|
||
state: StateTree
|
||
) {
|
||
const group = Logger.groupCollapsed || Logger.group
|
||
try {
|
||
group(mutationId, new Date().toLocaleString())
|
||
Logger.log('mutation', mutation)
|
||
Logger.log('state', state)
|
||
Logger.groupEnd()
|
||
} catch (e) {
|
||
Logger.log('—— log end ——')
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @params option
|
||
* @default options = { storage: window.localStorage, key: 'pinia', logger: false }
|
||
*/
|
||
export function StoragePlugin(options?: Options): PiniaPlugin {
|
||
const activeStores = options?.activeStores || []
|
||
|
||
const storage = options?.storage || (window && window.localStorage)
|
||
const key = options?.key || 'pinia'
|
||
const logger = options?.logger || false
|
||
|
||
// 获取state的值
|
||
const getState = (key: string, storage: Options['storage']) => {
|
||
const value = (storage as Storage).getItem(key)
|
||
try {
|
||
return typeof value === 'string'
|
||
? JSON.parse(value)
|
||
: typeof value === 'object'
|
||
? value
|
||
: undefined
|
||
} catch (err) {}
|
||
|
||
return undefined
|
||
}
|
||
|
||
// 设置state的值
|
||
const setState = (key: string, state: StateTree, storage: Options['storage']) => {
|
||
return (storage as Storage).setItem(key, JSON.stringify(state))
|
||
}
|
||
|
||
return (Context: PiniaPluginContext) => {
|
||
const store: PiniaPluginContext['store'] = Context.store
|
||
if (
|
||
(activeStores.length > 0 && activeStores.includes(store.$id)) ||
|
||
activeStores.length === 0
|
||
) {
|
||
const tempKey = `${key}-${store.$id}`
|
||
const data = getState(tempKey, storage)
|
||
data && store.$patch(data)
|
||
|
||
// $subscribe()一个 store的方法来观察 state 和它的变化，类似于 Vuex 的subscribe 方法
|
||
store.$subscribe(
|
||
(mutation: SubscriptionCallbackMutation<any>, state: StateTree) => {
|
||
// 记录日志
|
||
logger && logGroup(mutation.storeId, mutation, state)
|
||
const tempKey = `${key}-${mutation.storeId}`
|
||
setState(tempKey, state, storage)
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
)
|
||
}
|
||
// 初始化时获取数据，如果有的话，把原来的pinia的state替换掉
|
||
}
|
||
}
|