如何使用nuxtjs3 useFetch为数组选择参数或进行深度选择？

Question

在我的 nuxtjs3 项目中，我想选择从 API 获取的数据。

在本例中，我使用 jsonPlaceholder。从对象中选取数据时我没有任何问题：

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

console.log({useFetchOnly})

但是当我尝试从对象数组中选取数据时，我不知道该怎么做。我尝试了以下方法，但没有成功：

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

console.log({useFetchArray})

有什么解决办法吗？

我发现的文档在这种情况下没有帮助： 链接

Answer 1

实际上，你需要

transform

而不是

pick

:

如果您需要对多个对象进行更多控制或映射，您可以使用

transform

函数可以更改查询结果。

所以你的最终代码应该如下所示：

const { data} = await useFetch('url', {
    transform: (todos) => {
        return todos.map((todo) => ({
            title: todo.title,
        })),
    }
})

另请记住：

选择和转换都不会阻止不需要的数据 最初获取。但它们会阻止不需要的数据被泄露 添加到从服务器传输到客户端的有效负载中。

您可以在文档中了解更多信息。