Как правильно реализовать composable в Nuxt для выполнения запроса и обработки его состояний (загрузка, успех, ошибка)?

Что такое composable в Nuxt?

Composable — это функция, которая использует Composition API Vue для инкапсуляции и переиспользования логики. В Nuxt composables автоматически импортируются, если находятся в директории composables/. Это удобно для выноса повторяющейся логики, например, работы с API.

Реализация composable для запроса

Создайте файл composables/useFetchData.ts. Внутри определите функцию, которая возвращает реактивные состояния и метод для выполнения запроса. Используйте ref для отдельных значений и reactive для объекта состояния. Обработка ошибок обязательна для корректного UX.

// composables/useFetchData.ts
export const useFetchData = (url: string) => {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

  const fetchData = async () => {
    loading.value = true
    error.value = null
    try {
      const response = await fetch(url)
      if (!response.ok) throw new Error('Network error')
      data.value = await response.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  return { data, error, loading, fetchData }
}

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

В компоненте вызовите composable и используйте состояния в шаблоне. Метод fetchData можно вызвать в onMounted или по действию пользователя.

<script setup>
const { data, error, loading, fetchData } = useFetchData('/api/posts')
onMounted(fetchData)
</script>

<template>
  <div v-if="loading">Загрузка...</div>
  <div v-else-if="error">Ошибка: {{ error }}</div>
  <div v-else>{{ data }}</div>
</template>

Практические рекомендации

• Используйте useAsyncData или useFetch от Nuxt для SSR-совместимости, если нужна серверная загрузка.
• Для сложных состояний (например, несколько запросов) используйте reactive.
• Обрабатывайте отмену запроса через AbortController, если это необходимо.

Вывод: Создание composable для запросов улучшает переиспользуемость и читаемость кода. Это особенно полезно в больших приложениях, где одинаковые запросы используются в разных местах. Для SSR-приложений предпочтительнее встроенные утилиты Nuxt, но кастомный composable даёт полный контроль над состояниями.