Nuxt.js如何通过useFetch限制HackerNews API的返回条目数量？

HackerNews的topstories.json接口本身不支持通过URL参数限制返回条目数，你尝试的.limit(1000)写法不适用于Nuxt的useFetch方法，所以没有效果。下面给你两种可行的实现方式：

方式一：获取数据后直接截取 #

先完整获取接口返回的ID列表，再手动截取需要的条目数量：

<template>
    <p>Products</p>
    <div>
        <div class="grid grid-cols-4 gap-5">
            <!-- 注意key要绑定循环项s，避免警告 -->
            <div v-for="s in limitedStories" :key="s">
                <ProductCard :story="s"/>
            </div>
        </div> 
    </div>
</template>

<script setup>
definePageMeta({
    layout: "products"
})

const { data: stories } = await useFetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty')
// 截取前10条，可自行修改为需要的数量（比如1000）
const limitedStories = stories.value ? stories.value.slice(0, 10) : []
</script>

方式二：在useFetch的transform选项中处理 #

可以在请求阶段直接对返回数据做转换，一步得到限制后的列表：

<template>
    <p>Products</p>
    <div>
        <div class="grid grid-cols-4 gap-5">
            <div v-for="s in limitedStories" :key="s">
                <ProductCard :story="s"/>
            </div>
        </div> 
    </div>
</template>

<script setup>
definePageMeta({
    layout: "products"
})

const { data: limitedStories } = await useFetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty', {
    transform: (response) => {
        // 直接截取指定数量的条目，这里示例为10条
        return response.slice(0, 10)
    }
})
</script>

另外需要注意：你原来代码里的:key="story"是错误的，应该绑定循环变量s，否则会触发Vue的key值重复警告。

内容的提问来源于stack exchange，提问作者Azizxon Zufarov