callOnce
在 SSR 或 CSR 期間，僅執行一次給定的函式或程式碼區塊。
此工具程式自 Nuxt v3.9 起可用。
目的
callOnce 函式旨在僅在以下情況執行給定的函式或程式碼區塊：
- 伺服器端渲染，但不包含 hydration
- 客戶端導航
這對於應僅執行一次的程式碼很有用，例如記錄事件或設定全域狀態。
用法
callOnce 的預設模式是僅執行程式碼一次。例如，如果程式碼在伺服器上執行，則不會在客戶端再次執行。如果您在客戶端多次 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>
也可以在每次導航時執行，同時仍然避免初始伺服器/客戶端雙重載入。為此，可以使用 navigation 模式
app.vue
<script setup lang="ts">
const websiteConfig = useState('config')
await callOnce(async () => {
console.log('This will only be logged once and then on every client side navigation')
websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
}, { mode: 'navigation' })
</script>
navigation 模式自 Nuxt v3.15 起可用。callOnce 是一個 composable，旨在直接在 setup 函式、外掛程式或路由中介軟體中呼叫，因為它需要將資料新增至 Nuxt payload，以避免在頁面 hydration 時在客戶端重新呼叫該函式。類型
callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
type CallOnceOptions = {
/**
* Execution mode for the callOnce function
* @default 'render'
*/
mode?: 'navigation' | 'render'
}
參數
key：一個唯一鍵，確保程式碼僅執行一次。如果您未提供 key，則會為您產生一個對於callOnce實例的檔案和行號而言是唯一的 key。fn：要執行一次的函式。此函式也可以傳回Promise和一個值。options：設定模式，可以是重新在導航時執行 (navigation) 或僅在應用程式的生命週期內執行一次 (render)。預設為render。render：在初始渲染期間（SSR 或 CSR）執行一次 - 預設模式navigation：在初始渲染期間執行一次，並且在後續的客戶端導航中每次執行一次