通过 100 多个技巧学习 Nuxt!

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>
callOncePinia 模块 结合使用以调用 store 操作非常有用。
请在 文档 > 入门 > 状态管理 中阅读更多内容。
请注意,callOnce 不返回任何内容。如果你想在 SSR 期间进行数据获取,你应该使用 useAsyncDatauseFetch
callOnce 是一个组合式函数,旨在直接在 setup 函数、插件或路由中间件中调用,因为它需要将数据添加到 Nuxt 有效负载中,以避免在页面水合时在客户端重新调用该函数。

类型

callOnce(fn?: () => any | Promise<any>): Promise<void>
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
  • key:一个唯一的键,确保代码只运行一次。如果你不提供键,则会为你生成一个对于 callOnce 实例的文件和行号唯一的键。
  • fn:要运行一次的函数。此函数也可以返回一个 Promise 和一个值。