Nuxt3+Quasar服务端分页：useFetch调用refresh()未更新参数问题

你的核心问题是useAPIFetch的params参数没有建立响应式依赖，初始调用时params取的是pagination的静态初始值，后续更新pagination后，refresh()并不会重新计算params，导致请求始终使用旧参数。

具体问题点 #

1. params对象直接使用pagination.value.sortBy这类静态取值，而非响应式的动态计算逻辑，只会在初始化时读取一次值。
2. watch数组仅监听了search，未监听pagination的变化；即使监听了，静态params也不会自动更新。
3. posts和meta是直接赋值的静态变量，无法随data的更新同步变化。

修复代码 #

<script setup>
const pagination = ref({
  sortBy: "",
  descending: true,
  page: 1,
  rowsPerPage: 20,
  rowsNumber: 100,
});

const search = ref(""); // 补全原代码中未声明的响应式变量
const filter = ref("");

// Get Data：将params改为响应式函数，每次请求都会重新获取最新参数
const { data, error, pending, refresh } = await useAPIFetch<CustomResponse>(uri, {
  method: "GET",
  // 用函数返回params，确保每次请求（包括refresh）都取最新值
  params: () => ({
    search: search.value,
    list: false,
    sort: pagination.value.sortBy,
    sortOrder: pagination.value.descending ? "desc" : "asc",
    size: pagination.value.rowsPerPage,
    page: pagination.value.page,
  }),
  // 可选：自动监听参数变化触发请求，可根据需求开启
  watch: [search, pagination],
});

// 用computed同步data的变化，确保数据响应式更新
const posts = computed(() => data.value?.data || []);
const meta = computed(() => data.value?.meta || {});

// 监听meta变化，自动更新总条数
watch(meta, (newMeta) => {
  if (newMeta.total) {
    pagination.value.rowsNumber = newMeta.total;
  }
}, { immediate: true });

// 表格分页/排序/筛选回调
const handleRequest = (props) => {
  const { page, rowsPerPage, sortBy, descending } = props.pagination;
  pagination.value.sortBy = sortBy;
  pagination.value.descending = descending;
  pagination.value.page = page;
  pagination.value.rowsPerPage = rowsPerPage;
  search.value = filter.value;
  
  // 现在refresh会调用params函数，获取最新的分页参数
  refresh();
};
</script>

关键修复说明 #

• params改为函数：这是核心修复点，函数会在每次请求（包括refresh）时执行，返回最新的参数对象，确保分页、排序参数始终是当前最新值。
• 用computed处理数据：posts和meta通过computed从响应式的data中取值，保证数据更新时视图同步刷新。
• 监听meta更新总条数：通过watch监听meta的变化，自动更新pagination的rowsNumber，无需手动赋值。

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