refreshNuxtData
Nuxt에서 모든 또는 특정 asyncData 인스턴스를 새로 고침
refreshNuxtData는 useAsyncData, useLazyAsyncData, useFetch, useLazyFetch에서 사용되는 모든 또는 특정 asyncData 인스턴스를 다시 가져오는 데 사용됩니다.
컴포넌트가 <KeepAlive>에 의해 캐시되고 비활성화 상태에 들어가면, 컴포넌트가 언마운트될 때까지 컴포넌트 내부의 asyncData는 여전히 다시 가져옵니다.
Type
refreshNuxtData(keys?: string | string[])
Parameters
keys: 데이터를 가져오는 데 사용되는keys로 단일 문자열 또는 문자열 배열입니다. 이 매개변수는 선택 사항입니다. 명시적으로keys가 지정되지 않으면 모든useAsyncData및useFetch키가 다시 가져옵니다.
Return Values
refreshNuxtData는 모든 또는 특정 asyncData 인스턴스가 새로 고쳐지면 해결되는 promise를 반환합니다.
Examples
모든 데이터 새로 고침
아래 예제는 Nuxt 애플리케이션에서 useAsyncData 및 useFetch를 사용하여 가져오는 모든 데이터를 새로 고칩니다.
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">
모든 데이터 다시 가져오기
</button>
</div>
</template>
특정 데이터 새로 고침
아래 예제는 키가 count 및 user와 일치하는 데이터만 새로 고칩니다.
pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)
async function refresh () {
refreshing.value = true
try {
// 여러 데이터를 새로 고치기 위해 키 배열을 전달할 수도 있습니다.
await refreshNuxtData(['count', 'user'])
} finally {
refreshing.value = false
}
}
</script>
<template>
<div v-if="refreshing">
로딩 중
</div>
<button @click="refresh">새로 고침</button>
</template>
asyncData 인스턴스에 접근할 수 있는 경우, 데이터를 다시 가져오는 선호되는 방법으로 refresh 또는 execute 메서드를 사용하는 것이 좋습니다.
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/utils/refresh-nuxt-data