refreshNuxtData 从服务器重新获取所有数据并更新页面
同时使 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的缓存失效。
Type
ts
refreshNuxtData(keys?: string | string[])
参数:
keys:
类型:String | String[]refreshNuxtData接受单个或字符串数组作为用于获取数据的keys。
此参数是可选的。 当未指定keys时，将重新获取所有useAsyncData和useFetch。
示例
刷新所有数据
下面的示例刷新了当前页面上使用 useAsyncData 和 useFetch 获取的所有数据。
pages/some-page.vue
vue
<script setup>
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>
刷新特定数据
下面的示例仅刷新键与count匹配的数据。
pages/some-page.vue
vue
<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>
<template>
<div>
{{ pending ? 'Loading' : count }}
</div>
<button @click="refresh">
Refresh
</button>
</template>