useNuxtData
访问数据获取组合式函数当前的缓存值。
使用方式
useNuxtData
是一个组合式函数,用于访问如 useAsyncData
、useLazyAsyncData
、useFetch
和 useLazyFetch
这些数据获取函数的当前缓存值。只需提供数据获取时使用的 key,即可检索缓存数据并按需使用。
这在优化性能(如复用已获取的数据)或实现乐观更新、级联数据更新等功能时非常有用。
使用 useNuxtData
前,请确保对应的数据获取函数(如 useFetch
、useAsyncData
等)已经使用显式的 key 调用过。
参数
key
:用于标识缓存数据的唯一 key。该 key 应与原始数据获取时使用的 key 保持一致。
返回值
data
:一个响应式引用,指向与提供的 key 关联的缓存数据。如果没有缓存数据,则值为null
。当缓存数据发生变化时,该Ref
会自动更新,支持组件内的无缝响应式行为。
示例
以下示例展示了如何在从服务器获取最新数据时,使用缓存数据作为占位符。
pages/posts.vue
<script setup lang="ts">
// 使用 'posts' 作为 key,稍后可以通过该 key 访问相同的数据
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>
pages/posts/[id].vue
<script setup lang="ts">
// 访问父路由 posts.vue 中 useFetch 的缓存值
const { data: posts } = useNuxtData('posts')
const route = useRoute()
const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
key: `post-${route.params.id}`,
default() {
// 从缓存中查找指定的文章,并将其设置为默认值
return posts.value.find(post => post.id === route.params.id)
}
})
</script>
乐观更新
以下示例展示了如何通过 useNuxtData
实现乐观更新(Optimistic Updates)。
乐观更新是一种用户界面交互技术,即在假设服务器操作成功的前提下立即更新 UI。如果操作失败,则回滚到之前的状态。
pages/todos.vue
<script setup lang="ts">
// 使用 'todos' 作为 key,稍后可以访问相同数据
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
</script>
components/NewTodo.vue
<script setup lang="ts">
const newTodo = ref('')
let previousTodos = []
// 访问 todos.vue 中 useAsyncData 的缓存值
const { data: todos } = useNuxtData('todos')
async function addTodo () {
return $fetch('/api/addTodo', {
method: 'post',
body: {
todo: newTodo.value
},
onRequest () {
// 保存先前的缓存值,以便请求失败时恢复
previousTodos = todos.value
// 乐观地更新 todos 列表
todos.value = [...todos.value, newTodo.value]
},
onResponseError () {
// 如果请求失败,则回滚数据
todos.value = previousTodos
},
async onResponse () {
// 如果请求成功,在后台刷新 todos 数据
await refreshNuxtData('todos')
}
})
}
</script>
类型定义
useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }