Nuxt3迁移问题：useFetch传数组参数后端仅获单个值

这个问题的核心是Nuxt3的useFetch（基于ofetch）默认的参数序列化规则和Axios不同：Axios会自动给数组参数添加[]后缀（比如brand[]=2&brand[]=3），而ofetch默认遵循URLSearchParams标准，只会生成brand=2&brand=3，而Laravel需要参数名带[]才能解析为数组。

下面提供三种可行的解决方案：

方案1：手动指定带[]的参数名 #

直接在params里把数组参数的键名改成xxx[]，这样useFetch会自动生成符合Laravel要求的URL：

const { data, pending, error } = await useFetch(`/api/my/url/${route.params.slug}`, {
    params: { 
        page, 
        order, 
        'brand[]': brand, // 改为带[]的键名
        condition, 
        min, 
        max 
    },
    watch: [page, order, brand, condition, min, max],
    onResponse({ request, response, options }) {
        if (response.ok) {
            // ...
        }
    },
});

这种方法适合只有少数数组参数的场景，简单直接。

方案2：全局配置ofetch的参数序列化器 #

如果项目中有很多地方需要传递数组参数，可以在nuxt.config.ts里全局配置ofetch的序列化规则，让所有数组参数自动加上[]后缀：

export default defineNuxtConfig({
  // 其他配置...
  ofetch: {
    paramsSerializer: (params) => {
      const searchParams = new URLSearchParams();
      Object.entries(params).forEach(([key, value]) => {
        // 数组类型参数添加[]后缀
        if (Array.isArray(value)) {
          value.forEach(item => {
            searchParams.append(`${key}[]`, item);
          });
        } else {
          searchParams.append(key, value);
        }
      });
      return searchParams.toString();
    }
  }
});

配置后，所有使用useFetch、$fetch的请求都会自动处理数组参数，无需逐个修改。

方案3：给单个useFetch请求配置序列化器 #

如果不想全局修改，也可以单独给当前的useFetch请求配置参数序列化逻辑：

const { data, pending, error } = await useFetch(`/api/my/url/${route.params.slug}`, {
    params: { page, order, brand, condition, min, max },
    // 自定义参数序列化规则
    paramsSerializer: (params) => {
      const searchParams = new URLSearchParams();
      Object.entries(params).forEach(([key, value]) => {
        if (Array.isArray(value)) {
          value.forEach(item => {
            searchParams.append(`${key}[]`, item);
          });
        } else {
          searchParams.append(key, value);
        }
      });
      return searchParams.toString();
    },
    watch: [page, order, brand, condition, min, max],
    onResponse({ request, response, options }) {
        if (response.ok) {
            // ...
        }
    },
});

验证效果 #

配置完成后，生成的URL会和之前Axios的格式一致：/api/my/url?page=1&order=latest&brand[]=2&brand[]=3，Laravel就能正确接收到数组形式的brand参数了。

内容的提问来源于stack exchange，提问作者Dávid Schnellbach