Question

useNuxtData

使您可以使用显式提供的密钥访问 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的当前缓存值。

类型 Type

ts

useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }

示例 Example

在后台获取时显示过时数据

下面的示例显示了如何在从服务器获取最新数据时将缓存数据用作占位符。

archive.vue

// 我们可以稍后使用`posts`键访问相同的数据
const { data } = await useFetch('/api/posts', { key: 'posts' })

single.vue

// 访问archive.vue中useFetch的缓存值
const { data: posts } = useNuxtData('posts')

const { data } = await useFetch(`/api/posts/${postId}`, {
  key: `post-${postId}`,
  default: () => {
    // 从缓存中查找单个帖子并将其设置为默认值。
    return posts.value.find(post => post.id === postId)
  }
})

优化更新

我们可以利用缓存，在进行突变后更新用户界面，同时在后台无效化数据。

这是指使用缓存中的旧数据更新用户界面，同时在后台将新数据从服务器更新到缓存，以确保下一次查询或突变会使用最新数据。

这是一种优化技术，可提高应用程序的性能和响应速度。

Optimistic Updates
指的是一种优化技术，即在向服务器提交更改时，预先在客户端立即更新应用程序状态，而不必等待服务器返回响应。这样可以增强用户体验，因为更改似乎是即时的，而不是需要等待服务器的响应。

todos.vue

// 我们可以稍后使用“todos”键访问相同的数据
const { data } = await useFetch('/api/todos', { key: 'todos' })

add-todo.vue

const newTodo = ref('')
const previousTodos = ref([])

// 访问 todos.vue 中 useFetch 的缓存值
const { data: todos } = useNuxtData('todos')

const { data } = await useFetch('/api/addTodo', {
  key: 'addTodo',
  method: 'post',
  body: {
    todo: newTodo.value
  },
  onRequest () {
    previousTodos.value = todos.value // 存储以前缓存的值以在获取失败时恢复。

    todos.value.push(newTodo.value) // 乐观地更新待办事项。
  },
  onRequestError () {
    todos.value = previousTodos.value // 如果请求失败，则回滚数据。
  },
  async onResponse () {
    await refreshNuxtData('todos') // 如果请求成功，则在后台使待办事项无效。
  }
})