callOnce
SSRまたはCSR中に一度だけ指定された関数またはコードブロックを実行します。
このユーティリティは、Nuxt v3.9以降で使用可能です。
目的
callOnce関数は、サーバーサイドレンダリング中に一度だけ、指定された関数またはコードブロックを実行するように設計されていますが、
- ハイドレーション
- クライアント側のナビゲーション
では実行されません。これは、イベントのログ記録やグローバル状態の設定など、一度だけ実行する必要があるコードに役立ちます。
使用方法
app.vue
<script setup lang="ts">
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
callOnceは、セットアップ関数、プラグイン、またはルートミドルウェアで直接呼び出すことを目的としたコンポーザブルです。これは、ページがハイドレートされたときにクライアントで関数を再呼び出さないように、Nuxtペイロードにデータを追加する必要があるためです。型
callOnce(fn?: () => any | Promise<any>): Promise<void>
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
key: コードを一度だけ実行することを保証する一意のキー。キーを指定しない場合、callOnceのインスタンスのファイルと行番号に一意のキーが生成されます。fn: 一度だけ実行する関数。この関数はPromiseと値を返すこともできます。