vue3 封装axios提交数据

在Vue3中封装Axios并提交数据的方法可以通过以下步骤实现：

1. 首先，在你的项目中创建一个名为axios.js的文件，并在其中引入Axios和Vue。可以使用`import`语句导入Axios和Vue，并使用`reactive`函数创建一个响应式对象来存储Axios实例。

2. 在axios.js文件中，使用`axios.create()`方法创建一个Axios实例。你可以在该方法的参数中配置基本的Axios设置，如基础路径和超时时间。

3. 创建一个Vue插件，可以使用`install`方法。在该方法中，将Axios实例绑定到Vue的全局属性上，以便在整个项目中可以访问该实例。你可以使用`app.config.globalProperties`来访问Vue的全局属性。

4. 在主入口文件（例如index.js）中引入Axios文件，并使用`app.use()`方法来安装Axios插件。这样，Axios就会被全局挂载并可以在项目中使用。

下面是一个示例代码：

// axios.js

import axios from 'axios';
import { reactive } from 'vue';

const axiosInstance = axios.create({
  // 在这里配置 Axios 实例的基本设置
  baseURL: 'http://localhost:3000/',
  timeout: 3000
});

const AxiosPlugin = {
  install(app) {
    app.config.globalProperties.$axios = axiosInstance;
  }
};

export default AxiosPlugin;

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import AxiosPlugin from './axios.js';

const app = createApp(App);

app.use(AxiosPlugin);

app.mount('#app');

现在，你可以在整个Vue3项目中使用`this.$axios`来访问Axios实例，并使用其提供的方法来提交数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue 3 封装 axios的两种方式](https://blog.csdn.net/newboygogogo/article/details/130526078)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [Vue项目中对axios进行二次封装](https://blog.csdn.net/n747793292/article/details/129954131)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue3【使用axios并封装axios请求】](https://blog.csdn.net/qq_41579104/article/details/130627226)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]