跳到主要内容

useStorageAsync

分类
导出大小
1.47 kB
上次更改
3 个月前
相关

支持异步的响应式存储。

用法

基本用法请参考 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
>>

来源

源文件文档

贡献者

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

更新日志

v13.6.0
3a2df - feat: 添加 onReady 选项和 Promise 返回 (#4158)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.3.0
e6a17 - fix: initialValue 是 getter 时更正初始化 (#4452)
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.7.2
c197e - fix: 更正 ssr 处理程序 (#3703)

根据 MIT 许可证发布。