⬅️ Back to Table of Contents

📄 useStorageAsync

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	14
⚡ Async/Await Patterns	1
📐 Interfaces	1

📚 Table of Contents

• Imports
• Async/Await Patterns
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useStorageAsync/index.ts

📦 Imports

Name	Source
RemovableRef	@vueuse/shared
MaybeRefOrGetter	vue
StorageLikeAsync	../ssr-handlers
SerializerAsync	../useStorage
UseStorageOptions	../useStorage
watchWithFilter	@vueuse/shared
deepRef	vue
shallowRef	vue
toValue	vue
defaultWindow	../_configurable
getSSRHandler	../ssr-handlers
useEventListener	../useEventListener
StorageSerializers	../useStorage
guessSerializerType	../useStorage/guess

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
async-function	read	storage.getItem(key), storage.setItem(key, await serializer.write(rawInit)), ...	none

---

Functions

useStorageAsync(…): RemovableRef<string> & Promise<RemovableRef<string>>

Parameters:

• key string
• initialValue MaybeRefOrGetter<string>
• storage StorageLikeAsync
• options UseStorageAsyncOptions<string>

Returns: RemovableRef<string> & Promise<RemovableRef<string>>

Code

export function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<string>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<string>): RemovableRef<string> & Promise<RemovableRef<string>>

Internal helpers

Declared inside another function in this file.

read(event: StorageEvent): Promise<void>

Parameters:

• event StorageEvent

Returns: Promise<void>

Calls:

• storage.getItem
• storage.setItem
• serializer.write
• serializer.read
• mergeDefaults
• Array.isArray
• onError

Code

async function read(event?: StorageEvent) {
    if (!storage || (event && event.key !== key))
      return

    try {
      const rawValue = event ? event.newValue : await storage.getItem(key)
      if (rawValue == null) {
        data.value = rawInit
        if (writeDefaults && rawInit !== null)
          await storage.setItem(key, await serializer.write(rawInit))
      }
      else if (mergeDefaults) {
        const value = await serializer.read(rawValue)
        if (typeof mergeDefaults === 'function')
          data.value = mergeDefaults(value, rawInit)
        else if (type === 'object' && !Array.isArray(value))
          data.value = { ...(rawInit as any), ...value }
        else data.value = value
      }
      else {
        data.value = await serializer.read(rawValue)
      }
    }
    catch (e) {
      onError(e)
    }
  }

---

Interfaces

UseStorageAsyncOptions<T>

Interface Code

export interface UseStorageAsyncOptions<T> extends Omit<UseStorageOptions<T>, 'serializer'> {
  /**
   * Custom data serialization
   */
  serializer?: SerializerAsync<T>

  /**
   * On first value loaded hook.
   */
  onReady?: (value: T) => void
}

Properties

Name	Type	Optional	Description
serializer	SerializerAsync<T>	✓	not shown
onReady	(value: T) => void	✓	not shown

---

Generated by Syntax Scribe