基于useFetch实现加载更多按钮（合并新旧数组）

不用新增额外变量，调整下useFetch的使用逻辑，自己管理数据累积即可：

1. 把原来由useFetch返回的productsFetched改成自己定义的响应式数组，用来存储所有加载的产品数据
2. 利用useFetch的onResponse钩子，每次请求成功后把新数据合并到已有数组里
3. showMore只需要递增页码，useFetch会因为url的变化自动触发新请求，无需手动重复调用

修改后的完整代码：

const page = ref(1);
const pageSize = ref(10);

const params = ref<any>({
  pagination: {
    page: page.value,
    pageSize: pageSize.value,
  },
  populate: "*",
});

const url = computed(() => {
  return `http://localhost:1337/api/products?${qs.stringify(params.value)}`;
});

// 自己定义响应式数组存储所有产品数据
const productsFetched = ref<any[]>([]);

// 初始化请求，监听url变化自动触发新请求
await useFetch<any>(url, {
  onResponse({ response }) {
    // 注意Strapi响应结构是{ data: [...], meta: ... }，取实际数据部分合并
    productsFetched.value = [...productsFetched.value, ...response._data.data];
  },
  watch: [url] // 监听url变化，自动重新发起请求
});

const products = computed(() => flattenObj(productsFetched.value));

const showMore = () => {
  // 只需要递增页码，params和url会自动更新，触发useFetch请求新数据
  page.value += 1;
  params.value.pagination.page = page.value;
};

关键说明 #

• 自己定义productsFetched后，完全掌控数据合并逻辑，避免了原代码中直接修改useFetch返回数据的问题
• useFetch通过watch: [url]监听计算属性url的变化，当页码修改导致url更新时，会自动发送新请求
• onResponse钩子中可以安全访问旧数据并合并新数据，不需要额外变量存储旧数据

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