Skip to content

useStorageAsync

Category
Export Size
1.47 kB
Last Changed
last month
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)
v10.0.0-beta.5 on
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue

Released under the MIT License.

Join the Biggest FREE AI-Driven Development Event for Vue Developers
Save My Seat