Nuxt中参数变更时如何保留上一页已获取的数据？

核心问题是路由参数变更导致组件重新挂载，组件内部的total数组被重置。要保留历史数据，需要将数据存储在不会随组件挂载销毁的全局状态中，结合Nuxt的useState和useAsyncData实现即可。

以下是修改后的完整代码：

<template>
  <div v-for="(d, i) in total" :key="i">
    <span>{{ d.title }}</span>
    <span>{{ d.description }}</span>
  </div>
  <button @click="loadMore">加载更多</button>
</template>

<script setup>
const route = useRoute()
const router = useRouter()

// 用 useState 创建全局持久化状态，存储所有页面的累计数据
const total = useState('aboutPageData', () => [])
// 存储当前页码，避免组件重新挂载时页码重置
const currentPage = useState('currentPage', () => 1)

const { data } = await useAsyncData(
  // 给每个页面请求设置唯一key，缓存不同页面的数据
  `about-page-${route.params.page}`,
  () => $fetch('url', {
    params: { page: route.params.page },
    method: 'get'
  }),
  {
    initialCache: false,
    watch: [route],
    // 请求成功后将新数据追加到累计数组中
    onSuccess: (newData) => {
      // 避免重复添加数据（比如刷新页面时），根据你的数据结构调整判断逻辑
      const hasDuplicate = total.value.some(item => item.id === newData[0]?.id)
      if (!hasDuplicate) {
        total.value = [...total.value, ...newData]
      }
    }
  }
)

// 初始化时如果累计数据为空，填充第一页数据
onMounted(() => {
  if (total.value.length === 0 && data.value) {
    total.value = data.value
  }
})

const loadMore = () => {
  currentPage.value++
  router.push({ params: { page: currentPage.value } })
}
</script>

关键修改点说明： #

1. 全局状态存储：使用useState('aboutPageData')创建跨路由的全局状态，代替组件内部的data属性。这个状态在客户端导航时不会被重置，完美解决组件重新挂载导致的数据丢失问题。
2. 唯一请求Key：给useAsyncData设置about-page-${route.params.page}作为唯一Key，既可以缓存每个页面的请求结果，也能在路由参数变化时触发新的请求。
3. 数据追加逻辑：在useAsyncData的onSuccess回调中处理数据拼接，确保新页面的数据被追加到累计数组中，同时加入重复检查避免数据冗余。
4. 页码持久化：用useState存储当前页码，保证点击"加载更多"时页码不会因为组件重新挂载而重置。

原代码的问题分析： #

• 组件内部的total数组属于组件实例状态，每次路由参数变更组件重新挂载时，total会被重新初始化为空数组。
• 计算属性showingData直接修改this.total属于副作用操作，违背了计算属性"纯函数"的设计原则，容易引发不可预期的问题。

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