useStorageAsync
支持异步的响应式存储。
用法
基本用法请参考 useStorage
。
等待首次加载
当用户进入你的应用时,useStorageAsync()
将开始从异步存储加载值,有时你可能会在最开始获得默认的初始值,而不是存储中的真实值。
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)
在这种情况下,你可以等待存储准备好,返回值也是一个 Promise
,所以你可以在你的模板或脚本中等待它被解析。
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"
如果你必须等待多个存储,将它们放入一个 Promise.allSettled()
中。
ts
router.onReady(async () => {
await Promise.allSettled([
accessToken,
refreshToken,
userData,
])
app.mount('app')
})
选项中有一个名为 onReady
的回调函数。
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')
})
简单地使用 resolve
作为回调函数。
ts
const accessToken = useStorageAsync('access.token', '', SomeAsyncStorage, {
onReady: resolve
})
类型声明
显示类型声明
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>>