Skip to content

useStorageAsync

Category
Export Size
1.47 kB
Last Changed
2 months ago
Related

Reactive Storage in with async support.

Usage

The basic usage please refer to useStorage.

Wait First Loaded

When user entering your app, useStorageAsync() will start loading value from an async storage, sometimes you may get the default initial value, not the real value stored in storage at the very beginning.

ts
import { 
useStorageAsync
} from '@vueuse/core'
const
accessToken
=
useStorageAsync
('access.token', '', SomeAsyncStorage)
// accessToken.value may be empty before the async storage is ready
console
.
log
(
accessToken
.
value
) // ""
setTimeout
(() => {
// After some time, the async storage is ready
console
.
log
(
accessToken
.
value
) // "the real value stored in storage"
}, 500)

In this case, you can wait the storage prepared, the returned value is also a Promise, so you can wait it resolved in your template or script.

ts
// Use top-level await if your environment supports it
const 
accessToken
= await useStorageAsync('access.token', '', SomeAsyncStorage)
console
.
log
(
accessToken
.value) // "the real value stored in storage"

If you must wait multiple storages, put them into a Promise.allSettled()

ts
router.onReady(async () => {
  await 
Promise
.
allSettled
([
accessToken, refreshToken, userData, ]) app.mount('app') })

There is a callback named onReady in options:

ts
import { 
useStorageAsync
} from '@vueuse/core'
// Use ES2024 Promise.withResolvers, you may use any Deferred object or EventBus to do same thing. const {
promise
,
resolve
} =
Promise
.
withResolvers
()
const
accessToken
=
useStorageAsync
('access.token', '', SomeAsyncStorage, {
onReady
(
value
) {
resolve
(
value
)
} }) // At main.ts router.onReady(async () => { // Let's wait accessToken loaded await
promise
// Now accessToken has loaded, we can safely mount our app app.mount('app') })

Simply use resolve as callback:

ts
const 
accessToken
= useStorageAsync('access.token', '', SomeAsyncStorage, {
onReady
: resolve
})

Type Declarations

Show Type Declarations
ts
export interface 
UseStorageAsyncOptions
<
T
>
extends
Omit
<
UseStorageOptions
<
T
>, "serializer"> {
/** * Custom data serialization */
serializer
?:
SerializerAsync
<
T
>
/** * On first value loaded hook. */
onReady
?: (
value
:
T
) => void
} export declare function
useStorageAsync
(
key
: string,
initialValue
:
MaybeRefOrGetter
<string>,
storage
?:
StorageLikeAsync
,
options
?:
UseStorageAsyncOptions
<string>,
):
RemovableRef
<string> &
Promise
<
RemovableRef
<string>>
export declare function
useStorageAsync
(
key
: string,
initialValue
:
MaybeRefOrGetter
<boolean>,
storage
?:
StorageLikeAsync
,
options
?:
UseStorageAsyncOptions
<boolean>,
):
RemovableRef
<boolean> &
Promise
<
RemovableRef
<boolean>>
export declare function
useStorageAsync
(
key
: string,
initialValue
:
MaybeRefOrGetter
<number>,
storage
?:
StorageLikeAsync
,
options
?:
UseStorageAsyncOptions
<number>,
):
RemovableRef
<number> &
Promise
<
RemovableRef
<number>>
export declare function
useStorageAsync
<
T
>(
key
: string,
initialValue
:
MaybeRefOrGetter
<
T
>,
storage
?:
StorageLikeAsync
,
options
?:
UseStorageAsyncOptions
<
T
>,
):
RemovableRef
<
T
> &
Promise
<
RemovableRef
<
T
>>
export declare function
useStorageAsync
<
T
= unknown>(
key
: string,
initialValue
:
MaybeRefOrGetter
<null>,
storage
?:
StorageLikeAsync
,
options
?:
UseStorageAsyncOptions
<
T
>,
):
RemovableRef
<
T
> &
Promise
<
RemovableRef
<
T
>>

Source

SourceDocs

Contributors

Anthony Fu
Anthony Fu
Jelf
Simon Asika
IlyaL
Fernando Fernández
Alex Liu
Doctorwu
丶远方
Wu Rui
ntnyq
Waldi
Andreas Weber

Changelog

v13.6.0 on
3a2df - feat: add onReady option and Promise return (#4158)
v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.4.0 on
dd316 - feat: use passive event handlers everywhere is possible (#4477)
v12.3.0 on
e6a17 - fix: correct initialization when initialValue is getter (#4452)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.7.2 on
c197e - fix: correct ssr handler (#3703)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access