nuxt/fetch-composable-in-handler

Dlaczego

useFetch and useAsyncData register state with the current component and the page payload. Called from a click or submit handler, there is no setup context: each call creates new refs nobody watches, keys collide, results are cached when they should not be, and warnings about the missing Nuxt instance appear.

Poprawka

Use $fetch in event handlers (await $fetch('/api/orders', { method: 'POST', body })), then update your state or call refresh() of a useFetch declared in setup. Wrapping useFetch in your own use... composable is fine, as long as that composable is called from setup.

Przykłady

// bad
async function onSubmit() {
  const { data } = await useFetch('/api/orders', { method: 'POST', body: form })
}
// good
const { data: orders, refresh } = await useFetch('/api/orders')
async function onSubmit() {
  await $fetch('/api/orders', { method: 'POST', body: form })
  await refresh()
}

Źródła

• Nuxt docs, Data Fetching (useFetch is meant for setup; $fetch for event-based requests)
• Nuxt docs, useFetch

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain nuxt/fetch-composable-in-handler