useIDBKeyval

分类

@Integrations

导出大小

525 B

包

@vueuse/integrations

上次更改

4 个月前

idb-keyval 的封装。

演示

源代码在线演练 (beta)

可在 @vueuse/integrations 插件中使用。

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

bash

npm install idb-keyval@^6

用法

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

// bind object
const { data
: storedObject
, isFinished
 } = useIDBKeyval
('my-idb-keyval-store', { hello
: 'hi', greeting
: 'Hello' })

// update object
storedObject
.value
.hello
 = 'hola'

// bind boolean
const flag
 = useIDBKeyval
('my-flag', true) // returns Ref<boolean>

// bind number
const count
 = useIDBKeyval
('my-count', 0) // returns Ref<number>

// awaiting IDB transaction
await count
.set
(10)
console
.log
('IDB transaction finished!')

// delete data from idb storage
storedObject
.value
 = null

类型声明

interface Serializer
<T
> {
  read
: (raw
: unknown) => T

  write
: (value
: T
) => unknown
}
export interface UseIDBOptions
<T
> extends ConfigurableFlush {
  /**
   * Watch for deep changes
   *
   * @default true
   */
  deep
?: boolean
  /**
   * On error callback
   *
   * Default log error to `console.error`
   */
  onError
?: (error
: unknown) => void
  /**
   * Use shallow ref as reference
   *
   * @default false
   */
  shallow
?: boolean
  /**
   * Write the default value to the storage when it does not exist
   *
   * @default true
   */
  writeDefaults
?: boolean
  /**
   * Custom data serialization
   */
  serializer
?: Serializer
<T
>
}
export interface UseIDBKeyvalReturn
<T
> {
  data
: RemovableRef
<T
>
  isFinished
: ShallowRef
<boolean>
  set
: (value
: T
) => Promise
<void>
}
/**
 *
 * @param key
 * @param initialValue
 * @param options
 */
export declare function useIDBKeyval
<T
>(
  key
: IDBValidKey
,
  initialValue
: MaybeRefOrGetter
<T
>,
  options
?: UseIDBOptions
<T
>,
): UseIDBKeyvalReturn
<T
>