37% OFF during Black Friday at Mastering Nuxt.
Запустите заданную функцию или блок кода один раз во время SSR или CSR.
Эта утилита доступна с Nuxt v3.9.

Назначение

Функция callOnce предназначена для выполнения заданной функции или блока кода только один раз во время:

  • серверного рендеринга, но не гидратации,
  • навигации на клиенте.

Это полезно для кода, который должен выполняться только один раз, например, для регистрации события или настройки глобального состояния.

Использование

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>
callOnce полезен в сочетании с модулем Pinia для вызова действий хранилища.
Узнать больше Docs > Getting Started > State Management.
Обратите внимание, что callOnce ничего не возвращает. Если вы хотите выполнять получение данных во время SSR, вы должны использовать useAsyncData или useFetch.
callOnce это композабл, предназначенный для непосредственного вызова в функции setup, плагине или middleware роута, поскольку ему необходимо добавить данные в полезную нагрузку Nuxt, чтобы избежать повторного вызова функции на клиенте при гидратации страницы.

Тип

callOnce(fn?: () => any | Promise<any>): Promise<void>
callOnce(key: string, fn?: () => any | Promise<any>): Promise<void>
  • key: Уникальный ключ, гарантирующий, что код выполняется один раз. Если вы не предоставите ключ, то будет сгенерирован ключ, уникальный для файла и номера строки экземпляра callOnce.
  • fn: Функция, которую нужно выполнить один раз. Эта функция также может возвращать Promise и значение.