useIDBKeyval

Demo

Available in the @vueuse/integrations add-on.

将 idb-keyval 安装为对等依赖项

bash

npm install idb-keyval@^6

使用方法

import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'

// 绑定对象
const { data: storedObject, isFinished } = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })

// 更新对象
storedObject.value.hello = 'hola'

// 绑定布尔值
const flag = useIDBKeyval('my-flag', true) // 返回 Ref<boolean>

// 绑定数字
const count = useIDBKeyval('my-count', 0) // 返回 Ref<number>

// 等待 IDB 事务
await count.set(10)
console.log('IDB 事务完成！')

// 从 IDB 存储中删除数据
storedObject.value = null

类型声明

typescript

export interface UseIDBOptions extends ConfigurableFlush {
  /**
   * 监听深层变化
   *
   * @default true
   */
  deep?: boolean
  /**
   * 错误回调函数
   *
   * 默认将错误记录到 `console.error`
   */
  onError?: (error: unknown) => void
  /**
   * 使用浅层 Ref 作为参考
   *
   * @default false
   */
  shallow?: boolean
  /**
   * 当存储中不存在时，将默认值写入存储
   *
   * @default true
   */
  writeDefaults?: boolean
}
export interface UseIDBKeyvalReturn<T> {
  data: RemovableRef<T>
  isFinished: Ref<boolean>
  set: (value: T) => Promise<void>
}
/**
 *
 * @param key
 * @param initialValue
 * @param options
 */
export declare function useIDBKeyval<T>(
  key: IDBValidKey,
  initialValue: MaybeRefOrGetter<T>,
  options?: UseIDBOptions,
): UseIDBKeyvalReturn<T>