fix(useStorage): resume the watch after setting the value, fix loop u…

…pdates
vueuse · Dec 20, 2022 · c3851b4 · c3851b4
1 parent d4c5933
commit c3851b4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 33 deletions.
diff --git 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
@@ -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<T extends(string | number | boolean | object | null)>
   }
 
   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<T extends(string | number | boolean | object | null)>
     if (event && event.key !== key)
       return
 
-    data.value = read(event)
+    pauseWatch()
+    try {
+      data.value = read(event)
+    }
+    catch (e) {
+      onError(e)
+    }
+    finally {
+      resumeWatch()
+    }
   }
 }