feat(useStorage): mergeDefaults option

packages/core/useStorage/index.test.ts

@@ -347,5 +347,11 @@ describe('useStorage', () => {
     storage.setItem(KEY, JSON.stringify([1]))
     const arrayRef = useStorage(KEY, [2], storage, { mergeDefaults: true })
     expect(JSON.stringify(arrayRef.value)).toBe(JSON.stringify([1, 2]))
+
+    // custom function
+    storage.setItem(KEY, JSON.stringify([{ a: 1 }]))
+    const initial = [{ a: 3 }]
+    const customRef = useStorage(KEY, initial, storage, { mergeDefaults: () => ([{ a: 2 }, ...initial]) })
+    expect(JSON.stringify(customRef.value)).toBe(JSON.stringify([{ a: 2 }, { a: 3 }]))
   })
 })

packages/core/useStorage/index.ts

@@ -1,5 +1,5 @@
 import type { Awaitable, ConfigurableEventFilter, ConfigurableFlush, MaybeComputedRef, RemovableRef } from '@vueuse/shared'
-import { pausableWatch, resolveUnref } 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'
@@ -77,10 +77,12 @@ export interface UseStorageOptions<T> extends ConfigurableEventFilter, Configura
 
   /**
    * Merge the default value to the storage
+   * Note: It'll be a shallow merge when set to true
+   * You can provide a custom function for deep merge
    *
    * @default false
    */
-  mergeDefaults?: boolean
+  mergeDefaults?: boolean | ((storage: StorageLike, defaults: T) => T)
 
   /**
    * Custom data serialization
@@ -195,10 +197,11 @@ export function useStorage<T extends(string | number | boolean | object | null)>
         return rawInit
       }
       else if (!event && mergeDefaults) {
-        if (type === 'object') {
-          const value = serializer.read(rawValue)
+        const value = serializer.read(rawValue)
+        if (isFunction(mergeDefaults))
+          return mergeDefaults(storage!, value)
+        else if (type === 'object')
           return Array.isArray(value) ? [...value, ...<[]>rawInit] : { ...value, ...<object>rawInit }
-        }
         return rawInit
       }
       else if (typeof rawValue !== 'string') {