Vue3组合式函数传参后参数为undefined的解决方法

你的代码存在几个关键问题，导致参数传递失败和请求异常，下面是分步修复方案：

1. 修正组合式函数的结构 #

当前fetchArtist.js的结构完全错误：你把默认导出的函数命名为sendRequest，并且在调用fetchArtist()时立刻执行了fetch请求，而不是返回一个可以后续调用的sendRequest方法。正确的组合式函数应该内部封装数据状态和请求方法，供组件调用。

修改后的fetchArtist.js：

import { ref } from 'vue';

export default function fetchArtist() {
    const dataList = ref([]);
    const error = ref(null);

    // 定义真正的请求方法，接收artistName参数
    const sendRequest = async (artistName) => {
        if (!artistName) {
            error.value = '请输入艺术家名称';
            return;
        }
        error.value = null;
        dataList.value = [];
        
        try {
            const res = await fetch(`APIURL/${artistName}`);
            // 处理HTTP错误（比如404、500）
            if (!res.ok) {
                throw new Error(`请求失败: ${res.status}`);
            }
            const data = await res.json();
            if (data.artists && data.artists.length > 0) {
                dataList.value = data.artists.map(artist => ({
                    id: artist.id,
                    name: artist.name,
                    country: artist.country || 'Unknown'
                }));
            }
        } catch (err) {
            error.value = err.message;
            console.error('请求错误:', err);
        }
    };

    return { dataList, error, sendRequest };
}

2. 修复模板字符串变量语法 #

原代码中fetch(APIURL/{artistName})的变量写法错误，应该使用${变量名}的模板字符串语法，否则artistName会被当作字符串字面量，而非变量。

3. 组件中的调用逻辑（可简化优化） #

你的HomeView.vue核心调用逻辑是对的，可以进一步简化输入框绑定：

<script setup>
import { ref } from 'vue';
import fetchArtist from '../composables/fetchArtist';

const artistName = ref('');
const clicked = ref(false);

const {dataList, sendRequest, error} = fetchArtist();

const callApi = () => {
    sendRequest(artistName.value);
    clicked.value = true;
};
</script>

<template>
  <!-- 用v-model替代手动updateText方法，更简洁 -->
  <input v-model="artistName" type="text" placeholder="输入艺术家名称">
  <button @click="callApi">查询</button>
  
  <!-- 可选：显示错误提示 -->
  <div v-if="error" style="color:red">{{ error }}</div>
</template>

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