callOnce

运行给定的函数或代码块,在服务器端渲染或客户端导航时只执行一次。
这个工具从 Nuxt v3.9 版本开始可用。

目的

callOnce 函数旨在在以下情况下仅执行一次给定的函数或代码块:

  • 服务器端渲染,但不包括 hydrate
  • 客户端导航

这适用于应该只执行一次的代码,如记录事件或设置全局状态。

使用

app.vue
<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('这只会被打印一次')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
callOncePinia 模块结合使用时,用于调用 Store 操作非常有用。
Read more in Docs > Getting Started > State Management.
callOnce 不返回任何内容。如果您想在服务器端执行数据获取,应使用 useAsyncDatauseFetch
callOnce 是一个组合工具,旨在直接在设置函数、插件或路由中间件中调用,因为它需要在 Nuxt 负载中添加数据,以避免在页面 hydrate 时重新调用函数。

类型

callOnce(fn?: () => any | Promise<any>): Promise<void>
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
  • key: 一个唯一的键,确保代码只执行一次。如果您不提供键,那么将为您生成一个唯一的键,该键与 callOnce 实例的文件和行号相对应。
  • fn: 要执行一次的函数。这个函数也可以返回一个 Promise 和一个值。