如何从Quasar V2组合API设置函数访问配置的启动文件axios？

npm install axios

import { boot } from 'quasar/wrappers';
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的API基础URL
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

export default boot(({ app }) => {
  // 将Axios实例挂载到Vue实例上
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = api;
});

export { api };

import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { api } from 'boot/axios';

export function useFetchData() {
  const $q = useQuasar();
  const data = ref(null);
  const error = ref(null);
  const loading = ref(false);

  const fetchData = async (endpoint) => {
    loading.value = true;
    try {
      const response = await api.get(endpoint);
      data.value = response.data;
    } catch (err) {
      error.value = err;
      $q.notify({
        type: 'negative',
        message: 'Failed to fetch data'
      });
    } finally {
      loading.value = false;
    }
  };

  return {
    data,
    error,
    loading,
    fetchData
  };
}

<template>
  <div>
    <q-btn @click="loadData">Load Data</q-btn>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error.message }}</div>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script setup>
import { useFetchData } from 'path/to/your/composable';

const { data, error, loading, fetchData } = useFetchData();

const loadData = () => {
  fetchData('/your-endpoint');
};
</script>