Nuxt/docs/content/2.app/3.data-fetching.md

60 lines
1.6 KiB
Markdown

# Data Fetching
Nuxt provides `asyncData` to handle data fetching within you application.
## `asyncData`
Within your pages and components you can use `asyncData` to get access to data that resolves asynchronously.
### Usage
```js
asyncData(key: string, fn: () => Object, options?: { defer: boolean, server: boolean })
```
* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
* **fn** an asynchronous function that must return an object.
* **options**:
- _defer_: whether to load the route before resolving the async function (defaults to `false`)
- _server_: whether the fetch the data on server-side (defaults to `true`)
Under the hood, `defer: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `defer: true` and implementing a loading state instead for a snappier user experience.
This helper only works with:
- a component defined with `defineNuxtComponent`
- `<script setup nuxt>` syntax block
### Example
```vue
<template>
Page visits: {{ data.count }}
</template>
<script>
import { asyncData, defineNuxtComponent } from '@nuxt/app'
export default defineNuxtComponent({
setup () {
const { data } = asyncData('time', () => $fetch('/api/count'))
return { data }
}
})
</script>
```
When using with the `<script setup>` syntax, an addition attribute `nuxt` is required
```vue
<script setup nuxt>
import { asyncData } from '@nuxt/app'
const { data } = asyncData('time', () => $fetch('/api/count'))
</script>
<template>
Page visits: {{ data.count }}
</template>
```