refreshNuxtData
En esta página
refreshNuxtData is used to refetch all or specific asyncData instances, including those from useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch.
::note
If your component is cached by <KeepAlive> and enters a deactivated state, the asyncData inside the component will still be refetched until the component is unmounted.
::
Type#
```ts [Signature] export function refreshNuxtData (keys?: string | string[])
## Parameters
* `keys`: A single string or an array of strings as `keys` that are used to fetch the data. This parameter is **optional**. All [`useAsyncData`](/docs/4.x/api/composables/use-async-data) and [`useFetch`](/docs/4.x/api/composables/use-fetch) keys are re-fetched when no `keys` are explicitly specified.
## Return Values
`refreshNuxtData` returns a promise, resolving when all or specific `asyncData` instances have been refreshed.
## Example
### Refresh All Data
This example below refreshes all data being fetched using `useAsyncData` and `useFetch` in Nuxt application.
```vue [app/pages/some-page.vue]
<script setup lang="ts">
const refreshing = ref(false)
async function refreshAll () {
refreshing.value = true
try {
await refreshNuxtData()
} finally {
refreshing.value = false
}
}
</script>
<template>
<div>
<button
:disabled="refreshing"
@click="refreshAll"
>
Refetch All Data
</button>
</div>
</template>
Refresh Specific Data#
This example below refreshes only data where the key matches to count and user.
```vue [app/pages/some-page.vue]
Loading
```
::note
If you have access to the asyncData instance, it is recommended to use its refresh or execute method as the preferred way to refetch the data.
::
:read-more{to="/docs/4.x/getting-started/data-fetching"}