vue3 axios入口文件引入后其他组件无需引入

在Vue.js的项目中，如果我们想要在多个组件中使用axios，我们通常会在每个组件中单独引入axios，这样会导致代码冗余并增加维护的难度。而在Vue 3中，我们可以通过在入口文件中引入axios，然后将其设置为全局属性，这样其他组件就可以直接使用而无需再次引入。

在入口文件(main.js)中，我们可以这样引入和设置axios：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios

app.mount('#app')

在上面的代码中，我们首先使用import语句将axios引入到项目中。然后，我们通过app.config.globalProperties将axios设置为全局属性$axios。这样，我们在任何组件中都可以通过this.$axios来使用axios实例。

例如，在某个组件中，我们可以这样使用axios：

export default {
mounted() {
this.$axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
}

通过以上设置，我们可以在其他组件中直接通过this.$axios来访问axios实例，而无需再次引入axios。这样可以减少代码冗余并提高代码的可维护性。然而，需要注意的是，为了保持代码的清晰性和可读性，建议将axios的使用限制在需要进行网络请求的组件中，而不是在所有组件中都使用axios。