useStorageAsync

分类

状态

导出大小

1.47 kB

上次更改

3 个月前

用法

基本用法请参考 useStorage。

等待首次加载

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

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，所以你可以在你的模板或脚本中等待它被解析。

// 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() 中。

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

  app.mount('app')
})

选项中有一个名为 onReady 的回调函数。

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 作为回调函数。

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

类型声明

显示类型声明

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
>>