vue3使用axios携带参数发送请求的所有方式

Vue 3 中使用 axios 发送请求并携带参数的方式主要有以下几种：

1. **直接在组件内部使用**：

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const url = ref('https://api.example.com');
    const params = ref({ key: 'value' });

    onMounted(async () => {
      try {
        const response = await axios.get(url.value, { params: params.value });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    });

    return { url, params };
  },
}

在这里，`params` 变量作为响应参数传递给 `axios.get()`。

2. **通过 Axios 配置全局默认选项**：

import axios from 'axios';
import Vue from 'vue';

Vue.prototype.$axios = axios.create({
  baseURL: 'https://api.example.com',
  paramsSerializer: function (params) {
    // 序列化参数格式，如 querystring 或者 form data
    return Qs.stringify(params, { arrayFormat: 'brackets' });
  }
});

// 使用时只需传入数据即可
this.$axios.get('/', { params: { key: 'value' } }).then(response => ...);

这样，每次发送请求时都会自动带上配置好的参数。

3. **使用插件**：
可以使用像 `vue-axios` 这样的插件，安装后在组件内使用会更方便，例如：

npm install axios vuex-vuex-router-sync

然后在组件里：

import axios from 'axios';

methods: {
  fetchData() {
    this.$axios.get('/api', { params: { key: 'value' } })
      .then(response => ...)
      .catch(error => ...);
  }
}