fix(useStorage): read object only when it's serialized differently (v…

…ueuse#2782)
chenglu4343 · May 16, 2023 · d49736d · d49736d
1 parent 7da7c4e
commit d49736d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/core/useStorage/index.test.ts b/packages/core/useStorage/index.test.ts
@@ -1,5 +1,5 @@
 import { debounceFilter, promiseTimeout } from '@vueuse/shared'
-import { isVue3, ref } from 'vue-demi'
+import { isVue3, ref, toRaw } from 'vue-demi'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTwoTick, useSetup } from '../../.test'
 import { StorageSerializers, customStorageEventName, useStorage } from '.'
@@ -164,10 +164,12 @@ describe('useStorage', () => {
       data: 123,
     })
 
+    const storeRaw = toRaw(store.value)
     store.value.name = 'b'
     await nextTwoTick()
 
     expect(storage.setItem).toBeCalledWith(KEY, '{"name":"b","data":123}')
+    expect(storeRaw).toBe(toRaw(store.value))
 
     store.value.data = 321
     await nextTwoTick()

diff --git a/packages/core/useStorage/index.ts b/packages/core/useStorage/index.ts
@@ -254,7 +254,9 @@ export function useStorage<T extends(string | number | boolean | object | null)>
 
     pauseWatch()
     try {
-      data.value = read(event)
+      const newData = read(event)
+      if (typeof newData !== 'object' || serializer.write(newData) !== serializer.write(data.value))
+        data.value = read(event)
     }
     catch (e) {
       onError(e)