diff --git a/packages/integrations/useIDBKeyval/index.md b/packages/integrations/useIDBKeyval/index.md index 271f878e688..e6dc3f809c1 100644 --- a/packages/integrations/useIDBKeyval/index.md +++ b/packages/integrations/useIDBKeyval/index.md @@ -30,6 +30,10 @@ const flag = useIDBKeyval('my-flag', true) // returns Ref // bind number const count = useIDBKeyval('my-count', 0) // returns Ref +// awaiting IDB transaction +await count.set(10) +console.log('IDB transaction finished!') + // delete data from idb storage storedObject.value = null ``` diff --git a/packages/integrations/useIDBKeyval/index.ts b/packages/integrations/useIDBKeyval/index.ts index 2ed673dc96c..00d46d99433 100644 --- a/packages/integrations/useIDBKeyval/index.ts +++ b/packages/integrations/useIDBKeyval/index.ts @@ -1,7 +1,8 @@ import type { ConfigurableFlush, MaybeRefOrGetter, RemovableRef } from '@vueuse/shared' import { toValue } from '@vueuse/shared' +import { watchPausable } from '@vueuse/core' import type { Ref } from 'vue-demi' -import { ref, shallowRef, watch } from 'vue-demi' +import { ref, shallowRef } from 'vue-demi' import { del, get, set, update } from 'idb-keyval' export interface UseIDBOptions extends ConfigurableFlush { @@ -31,7 +32,12 @@ export interface UseIDBOptions extends ConfigurableFlush { * @default true */ writeDefaults?: boolean +} +export interface UseIDBKeyvalReturn { + data: RemovableRef + isFinished: Ref + set(value: T): Promise } /** @@ -44,7 +50,7 @@ export function useIDBKeyval( key: IDBValidKey, initialValue: MaybeRefOrGetter, options: UseIDBOptions = {}, -): { data: RemovableRef; isFinished: Ref } { +): UseIDBKeyvalReturn { const { flush = 'pre', deep = true, @@ -99,7 +105,21 @@ export function useIDBKeyval( } } - watch(data, () => write(), { flush, deep }) + const { + pause: pauseWatch, + resume: resumeWatch, + } = watchPausable(data, () => write(), { flush, deep }) - return { isFinished, data: data as RemovableRef } + async function setData(value: T): Promise { + pauseWatch() + data.value = value + await write() + resumeWatch() + } + + return { + set: setData, + isFinished, + data: data as RemovableRef, + } }