在nuxtjs3中如何使用useAsyncData和'pick'？

Question

我试图使用

useAsyncData

从 API 中获取一些数据并从中选择一些选项，但我失败了。欢迎任何有关

pick

中的

useAsyncData

选项的帮助。

使用

useFetch

的工作示例：

const { data: title } = await useFetch('https://jsonplaceholder.typicode.com/todos/1', {
  pick: ['title']
})

console.log({title})    // return { title: "delectus aut autem" }

但是当我尝试使用

useAsyncData

时：

const {data:user} = await useAsyncData('user',
  async() => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
      pick: ['title']
    })

    const body = await response.json()

    return body
  }
)

console.log({user})

// result: {
// completed: false
// id: 1
// title: "delectus aut autem"
// userId: 1
// }

我期望的结果是什么？

{ title: "delectus aut autem" }

有什么想法吗？

Answer 1

您正在使用本机

fetch

，但您需要使用

$fetch

可组合项。

文档：

• $fetch

  ：https://nuxt.com/docs/getting-started/data-fetching#fetch

• fetch

  （原生）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

useFetch(url) 几乎等同于 useAsyncData(url, () => $fetch(url))。它是最常见用途的开发者体验糖 案例。

但是

pick

选项仅在

useFetch

和

useAsyncData

可组合项中可用。

如果您想使用原生

fetch

，只需在响应中返回标题即可：

return {
  title: body.title
}

const {data:user} = await useAsyncData('user',
  async() => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')

    const { title } = await response.json()

    return {
      title
    }
  }
)