useStorageAsync

非同期サポートを備えたリアクティブストレージ。

使用法

基本的な使用法については 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 オブジェクトや EventBus を使用することもできます。
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
})