目的

callOnce 関数は、以下の状況で指定された関数やコードブロックを一度だけ実行するために設計されています：

• サーバーサイドレンダリング中（ハイドレーション時は除く）
• クライアントサイドのナビゲーション中

これは、イベントのログ記録やグローバルな状態の設定など、一度だけ実行すべきコードに役立ちます。

使用法

callOnce のデフォルトモードは、コードを一度だけ実行することです。例えば、コードがサーバーで実行された場合、クライアントでは再度実行されません。また、クライアントで callOnce を複数回呼び出しても、例えばこのページに戻ってきた場合でも再度実行されません。

const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('これは一度だけログに記録されます')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})

初回のサーバー/クライアントの二重読み込みを避けつつ、すべてのナビゲーションで実行することも可能です。そのためには、navigation モードを使用することができます：

const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('これは一度だけログに記録され、その後すべてのクライアントサイドナビゲーションで実行されます')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
}, { mode: 'navigation' })

型

callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>

type CallOnceOptions = {
  /**
   * callOnce 関数の実行モード
   * @default 'render'
   */
  mode?: 'navigation' | 'render'
}

パラメータ

• key: コードが一度だけ実行されることを保証するためのユニークなキー。キーを指定しない場合、callOnce のインスタンスのファイルと行番号にユニークなキーが生成されます。
• fn: 一度だけ実行する関数。非同期であることも可能です。
• options: モードを設定します。ナビゲーション時に再実行する (navigation) か、アプリのライフタイムで一度だけ実行する (render) かを選択します。デフォルトは render です。
  • render: 初回レンダリング時に一度実行（SSR または CSR） - デフォルトモード
  • navigation: 初回レンダリング時とその後のクライアントサイドナビゲーションごとに一度実行