callOnce
在 SSR 或 CSR 期间仅运行一次给定的函数或代码块。
此实用程序自 Nuxt v3.9 起可用。
目的
callOnce
函数旨在仅在服务器端渲染期间执行一次给定的函数或代码块,
- 但不在 hydration 期间
- 客户端导航期间
这对于应该只执行一次的代码很有用,例如记录事件或设置全局状态。
用法
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
是一个组合式函数,旨在直接在 setup 函数、插件或路由中间件中调用,因为它需要向 Nuxt 负载添加数据以避免在页面 hydration 时在客户端重新调用该函数。类型
callOnce(fn?: () => any | Promise<any>): Promise<void>
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
key
:一个唯一的键,确保代码只运行一次。如果不提供键,则会为您生成一个对callOnce
实例的文件和行号唯一的键。fn
:要运行一次的函数。此函数还可以返回一个Promise
和一个值。