Vue组合式API中如何正确传递输入值并通用化Axios请求？

你的问题核心在于原来的use-axios函数被限制为只能处理单个键值对的请求体，这种设计在多参数场景下确实会变得混乱。我们可以通过重构函数，让它直接处理完整的响应式对象，从而既保持通用性，又能灵活支持任意数量的参数。

重构思路 #

把sentData从单个值改成响应式对象，组件中直接绑定这个对象的属性，请求时直接将整个对象作为请求体发送。这样不管是单个邮政编码，还是{ id: "1234", user: "Me" }这种多参数结构，都能轻松处理。

修改后的代码 #

1. 更新use-axios.js

移除多余的objectData参数，让sentData初始化为空对象（支持传入初始默认值），请求时直接将sentData作为请求体：

import { reactive, toRefs } from "@vue/composition-api";
import axios from "axios";

export default function (url, errorMessage, initialData = {}) {
  const state = reactive({
    // 初始化传入的默认数据，默认是空对象
    sentData: { ...initialData },
    response: null
  });

  const fetchData = async () => {
    console.log("请求体:", state.sentData);
    
    const config = {
      headers: { "Content-Type": "application/json" }
    };

    try {
      const res = await axios.post(url, state.sentData, config);
      state.response = res.data;
    } catch (error) {
      console.error(errorMessage, error);
      // 这里可以添加自定义错误处理，比如设置错误提示状态
    }
  };

  // 可选：添加重置数据的函数，方便表单重置
  const resetData = () => {
    state.sentData = { ...initialData };
  };

  return { ...toRefs(state), fetchData, resetData };
}

2. 更新App.vue使用方式

现在可以直接绑定sentData的任意属性，单个或多个参数都能轻松实现：

<template>
  <div id="app">
    <!-- 单个参数场景 -->
    <input v-model="sentData.postcode" type="text" placeholder="Enter Postcode">
    
    <!-- 多参数场景，直接添加即可 -->
    <input v-model="sentData.id" type="text" placeholder="Enter ID">
    <input v-model="sentData.user" type="text" placeholder="Enter Username">
    
    <button @click="getAddress">Submit</button>
    <!-- 可选：添加重置按钮 -->
    <button @click="resetData">Reset</button>
  </div>
</template>

<script>
import useAxios from "@/composition/use-axios";

export default {
  name: "App",
  setup() {
    // 可以传入初始默认数据，比如默认ID
    const { sentData, response, fetchData, resetData } = useAxios(
      "api/address/lookup-address",
      "Failed Finding Address",
      { id: "1234" }
    );

    return { sentData, address: response, getAddress: fetchData, resetData };
  }
};
</script>

为什么这样改更好？ #

• 通用性拉满：不管是1个还是N个参数，都不需要修改use-axios函数，直接在组件中绑定属性即可。
• 代码更直观：组件里清晰展示了要传递的所有参数，请求体结构一目了然。
• 灵活度更高：支持传入初始默认值，还能通过resetData快速重置表单。
• 符合Vue响应式最佳实践：直接操作响应式对象的属性，Vue会自动跟踪变化，避免不必要的复杂逻辑。

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