useStorageAsync

类别

State

导出体积

1.47 kB

上次更改

2 months ago

用法

基本用法请参考 useStorage。

等待首次加载

当用户进入你的应用时，useStorageAsync() 会开始从异步存储加载值，有时你可能会先得到默认初始值，而非存储中真实的值。

import { useStorageAsync
 } from '@vueuse/core'

const accessToken
 = useStorageAsync
('access.token', '', SomeAsyncStorage)

// 在异步存储准备好之前，accessToken.value 可能为空
console
.log
(accessToken
.value
) // ""

setTimeout
(() => {
  // 一段时间后，异步存储准备好
  console
.log
(accessToken
.value
) // "存储中真实的值"
}, 500)

在这种情况下，你可以等待存储准备好，返回的值也是一个 Promise，因此你可以在模板或脚本中等待它的解析。

// 如果环境支持，可使用顶层 await
const accessToken
 = await useStorageAsync('access.token', '', SomeAsyncStorage)

console
.log
(accessToken
.value) // "存储中真实的值"

如果必须等待多个存储，放入 Promise.allSettled() 中：

router.onReady(async () => {
  await Promise
.allSettled
([
    accessToken,
    refreshToken,
    userData,
  ])

  app.mount('app')
})

选项中有一个名为 onReady 的回调：

import { useStorageAsync
 } from '@vueuse/core'

// 使用 ES2024 Promise.withResolvers，你也可以使用任何 Deferred 对象或事件总线来实现相同功能。
const { promise
, resolve
 } = Promise
.withResolvers
()

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

// 在 main.ts 中
router.onReady(async () => {
  // 等待 accessToken 加载完成
  await promise


  // 现在 accessToken 已经加载完成，可以安全挂载应用

  app.mount('app')
})

也可以直接将 resolve 作为回调使用：

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

类型声明

显示类型声明

export interface UseStorageAsyncOptions
<T
>
  extends Omit
<UseStorageOptions
<T
>, "serializer"> {
  /**
   * 自定义数据序列化
   */
  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
>>