diff --git a/packages/core/useStorage/index.test.ts b/packages/core/useStorage/index.test.ts index 2dc1e0360e8..f70699eee23 100644 --- a/packages/core/useStorage/index.test.ts +++ b/packages/core/useStorage/index.test.ts @@ -433,10 +433,12 @@ describe('useStorage', () => { expect(useStorage(KEY, 0).value).toBe(0) expect(console.error).toHaveBeenCalledWith(new Error('getDefaultStorage error')) - expect(useStorage(KEY, 0, { + const ref = useStorage(KEY, 0, { getItem: () => null, setItem: () => { throw new Error('write item error') }, - } as any).value).toBeUndefined() + } as any) + expect(ref.value).toBe(0) + ref.value = 1 expect(console.error).toHaveBeenCalledWith(new Error('write item error')) }) }) diff --git a/packages/core/useStorage/index.ts b/packages/core/useStorage/index.ts index fcc1b0ce3f7..ec1e5795bcb 100644 --- a/packages/core/useStorage/index.ts +++ b/packages/core/useStorage/index.ts @@ -1,6 +1,6 @@ +import { ref, shallowRef } from 'vue-demi' import type { Awaitable, ConfigurableEventFilter, ConfigurableFlush, MaybeComputedRef, RemovableRef } from '@vueuse/shared' import { isFunction, pausableWatch, resolveUnref } from '@vueuse/shared' -import { ref, shallowRef } from 'vue-demi' import type { StorageLike } from '../ssr-handlers' import { getSSRHandler } from '../ssr-handlers' import { useEventListener } from '../useEventListener' @@ -180,37 +180,28 @@ export function useStorage } function read(event?: StorageEvent) { - pauseWatch() - try { - const rawValue = event - ? event.newValue - : storage!.getItem(key) - - if (rawValue == null) { - if (writeDefaults && rawInit !== null) - storage!.setItem(key, serializer.write(rawInit)) - return rawInit - } - else if (!event && mergeDefaults) { - const value = serializer.read(rawValue) - if (isFunction(mergeDefaults)) - return mergeDefaults(value, rawInit) - else if (type === 'object' && !Array.isArray(value)) - return { ...rawInit as any, ...value } - return value - } - else if (typeof rawValue !== 'string') { - return rawValue - } - else { - return serializer.read(rawValue) - } + const rawValue = event + ? event.newValue + : storage!.getItem(key) + + if (rawValue == null) { + if (writeDefaults && rawInit !== null) + storage!.setItem(key, serializer.write(rawInit)) + return rawInit } - catch (e) { - onError(e) + else if (!event && mergeDefaults) { + const value = serializer.read(rawValue) + if (isFunction(mergeDefaults)) + return mergeDefaults(value, rawInit) + else if (type === 'object' && !Array.isArray(value)) + return { ...rawInit as any, ...value } + return value } - finally { - resumeWatch() + else if (typeof rawValue !== 'string') { + return rawValue + } + else { + return serializer.read(rawValue) } } @@ -226,6 +217,15 @@ export function useStorage if (event && event.key !== key) return - data.value = read(event) + pauseWatch() + try { + data.value = read(event) + } + catch (e) { + onError(e) + } + finally { + resumeWatch() + } } }