1---
2category: State
3---
4 
5# useStorageAsync
6 
7Reactive Storage in with async support.
8 
9## Usage
10 
11The basic usage please refer to `useStorage`.
12 
13## Wait First Loaded
14 
15When user entering your app, `useStorageAsync()` will start loading value from an async storage,
16sometimes you may get the default initial value, not the real value stored in storage at the very
17beginning.
18 
19```ts
20import { useStorageAsync } from '@vueuse/core'
21 
22const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage)
23 
24// accessToken.value may be empty before the async storage is ready
25console.log(accessToken.value) // ""
26 
27setTimeout(() => {
28  // After some time, the async storage is ready
29  console.log(accessToken.value) // "the real value stored in storage"
30}, 500)
31```
32 
33In this case, you can wait the storage prepared, the returned value is also a `Promise`,
34so you can wait it resolved in your template or script.
35 
36```ts
37// Use top-level await if your environment supports it
38const accessToken = await useStorageAsync('access.token', '', SomeAsyncStorage)
39 
40console.log(accessToken.value) // "the real value stored in storage"
41```
42 
43If you must wait multiple storages, put them into a `Promise.allSettled()`
44 
45```ts
46router.onReady(async () => {
47  await Promise.allSettled([
48    accessToken,
49    refreshToken,
50    userData,
51  ])
52 
53  app.mount('app')
54})
55```
56 
57There is a callback named `onReady` in options:
58 
59```ts
60import { useStorageAsync } from '@vueuse/core'
61 
62// Use ES2024 Promise.withResolvers, you may use any Deferred object or EventBus to do same thing.
63const { promise, resolve } = Promise.withResolvers()
64 
65const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
66  onReady(value) {
67    resolve(value)
68  }
69})
70 
71// At main.ts
72router.onReady(async () => {
73  // Let's wait accessToken loaded
74  await promise
75 
76  // Now accessToken has loaded, we can safely mount our app
77 
78  app.mount('app')
79})
80```
81 
82Simply use `resolve` as callback:
83 
84```ts
85const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
86  onReady: resolve
87})
88```
89 
90## Type Declarations
91 
92```ts
93export interface UseStorageAsyncOptions<T> extends Omit<
94  UseStorageOptions<T>,
95  "serializer"
96> {
97  /**
98   * Custom data serialization
99   */
100  serializer?: SerializerAsync<T>
101  /**
102   * On first value loaded hook.
103   */
104  onReady?: (value: T) => void
105}
106export declare function useStorageAsync(
107  key: string,
108  initialValue: MaybeRefOrGetter<string>,
109  storage?: StorageLikeAsync,
110  options?: UseStorageAsyncOptions<string>,
111): RemovableRef<string> & Promise<RemovableRef<string>>
112export declare function useStorageAsync(
113  key: string,
114  initialValue: MaybeRefOrGetter<boolean>,
115  storage?: StorageLikeAsync,
116  options?: UseStorageAsyncOptions<boolean>,
117): RemovableRef<boolean> & Promise<RemovableRef<boolean>>
118export declare function useStorageAsync(
119  key: string,
120  initialValue: MaybeRefOrGetter<number>,
121  storage?: StorageLikeAsync,
122  options?: UseStorageAsyncOptions<number>,
123): RemovableRef<number> & Promise<RemovableRef<number>>
124export declare function useStorageAsync<T>(
125  key: string,
126  initialValue: MaybeRefOrGetter<T>,
127  storage?: StorageLikeAsync,
128  options?: UseStorageAsyncOptions<T>,
129): RemovableRef<T> & Promise<RemovableRef<T>>
130export declare function useStorageAsync<T = unknown>(
131  key: string,
132  initialValue: MaybeRefOrGetter<null>,
133  storage?: StorageLikeAsync,
134  options?: UseStorageAsyncOptions<T>,
135): RemovableRef<T> & Promise<RemovableRef<T>>
136```
137