Nuxt3中useNuxtData结合游标分页缓存同步问题求助

你的问题核心在于初始化阶段的缓存判断和赋值仅执行一次：当lastId变化触发useFetch重新请求后，新获取的数据无法同步到categoryData；同时初始化时生成的cachedCategoryData缓存key不会随lastId更新，导致无法获取新的缓存条目。

修改后的代码实现 #

无需手动维护categoryData和缓存判断，直接利用useFetch的响应式特性与useNuxtData的缓存联动即可解决问题：

const lastId = computed(() => route.query.lastid)
// 响应式生成缓存key，随lastId变化自动更新
const cacheKey = computed(() => `${route.params.category}${lastId.value ? '-' + lastId.value : ''}`)

// useFetch自动处理缓存：优先复用对应key的缓存，无缓存则发起请求
const { data: categoryData, error } = await useFetch(`/public/category/${route.params.category}`, {
  key: cacheKey,
  watch: [lastId],
  query: { lastid: lastId }
})

关键说明 #

1. 响应式缓存key：用computed生成cacheKey，确保lastId变化时key自动更新，useFetch会以新key请求数据并同步更新缓存。
2. 自动同步数据：useFetch返回的data本身是响应式的，当lastId触发重新请求后，categoryData会自动同步最新请求结果，无需手动赋值。
3. 自动缓存管理：useFetch与useNuxtData深度集成，指定key后会自动复用对应key的缓存，无需手动判断缓存是否存在。

如果需要手动访问缓存数据，可通过响应式的cacheKey获取：

const cachedCategoryData = computed(() => useNuxtData(cacheKey.value))

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