vue3.0 挂载axios全局方法

在Vue 3.0中，我们可以使用以下方法全局导入axios：

1. 安装axios

通过命令行输入 `npm install axios` 安装axios

2. 创建axios实例

在main.js中全局创建一个axios实例并将其注入到vue实例中，如下：

import axios from 'axios'

const instance = axios.create({
baseURL: 'http://localhost:3000', //配置请求根路径
timeout: 5000 //配置请求超时时间
})

app.config.globalProperties.$axios = instance

3. 使用axios

以组件为例，在组件内部即可直接使用this. $axios.get()或this.$axios.post()等方法，如下：

export default {
data() {
return {
userList: []
}
},
mounted() {
this.$axios.get('/users').then(res => {
this.userList = res.data
}).catch(error => {
console.log(error)
})
}
}

相关问题

vue3 实现axios全局配置

可以通过在 main.js 中引入 axios 的方式来实现全局配置，具体步骤如下：

1. 在 main.js 中引入 axios：

import axios from 'axios'

2. 设置 axios 的全局默认配置：

axios.defaults.baseURL = 'https://api.example.com' // 设置接口的基础地址
axios.defaults.timeout = 10000 // 设置请求超时时间，单位为毫秒

3. 将 axios 挂载到 Vue 实例中，使其在组件中可以直接使用：

Vue.prototype.$axios = axios

这样就可以在组件中直接使用 $axios 来发送请求，并且默认配置已经生效。需要注意的是，这里的 baseURL 可以根据实际情况进行修改。

vue3 main.ts引入 axios_基于 Vue3.0 Composition Api 快速构建实战项目，在vue展示数据，不要setup函数

在Vue 3.0 Composition API中，我们可以通过使用`ref`、`reactive`等响应式函数来定义数据，并且在`setup`函数中进行数据的初始化和处理。如果不使用`setup`函数，我们可以在`main.ts`中直接定义一个Vue实例，然后在其中使用响应式函数来定义数据，如下所示：

import { createApp, reactive } from 'vue';
import axios from 'axios';
import App from './App.vue';

const app = createApp(App);

const data = reactive({
  users: [],
});

axios.get('/api/users').then((response) => {
  data.users = response.data;
});

app.config.globalProperties.$data = data;

app.mount('#app');

在上面的代码中，我们定义了一个响应式对象`data`，其中包含了一个`users`数组，用于存储从后端API获取到的用户数据。我们使用`axios`发送一个GET请求获取数据，并将数据赋值给`data.users`。最后，我们将`data`对象通过Vue实例的`config.globalProperties`属性挂载到全局中，这样在组件中就可以通过`this.$data.users`来访问数据了。最后，我们使用`app.mount('#app')`将Vue实例挂载到DOM中。