> Какие хуки или composables используются для работы с API во Vue 3 (Vue.js)

Во Vue 3 для работы с API чаще всего используются следующие подходы:

1. Встроенные хуки (Options API):

• mounted() - для выполнения запроса при монтировании компонента

• watch() - для реактивного повторного запроса при изменении зависимостей

2. Composition API хуки:

• onMounted() - аналог mounted в Composition API

• watch() или watchEffect() - для автоматического перезапроса

3. Пользовательские composables (рекомендуемый подход):

• useFetch(url, options) - встроенный в VueUse или Nuxt 3

• useAsyncData() - в Nuxt 3 для SSR-безопасных запросов

• Собственный composable, например:

JAVASCRIPT
// useApi.js
import { ref, onMounted } from 'vue'

export function useApi(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

  const fetchData = async () => {
    loading.value = true
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)
  return { data, error, loading, refresh: fetchData }
}

4. Сторонние библиотеки:

• Vue Query (TanStack Query) - useQuery(), useMutation() для кэширования и синхронизации

• Pinia - хранилища с actions для API-вызовов

• Axios - часто оборачивается в composable для перехвата ошибок и токенов

Лучшая практика: создавать отдельные composables для каждого эндпоинта или ресурса, инкапсулируя логику загрузки, ошибок и обновления данных.