Vue：use函数、插件配置(把axios封装为公共属性)

同2.0一样use函数接受一个函数或者对象(对象有install函数) 然后会调用这个传入的回调函数 给它传参app对象,以此来实现第三方插件

//main.js文件
import { createApp} from 'vue'
import App from './App.vue'
const app=createApp(App)

import $axios from "./http/$axios.js"
app.use($axios)

app.mount('#app')

 

将axios引入配置封装到一个单独的js文件中去，

//$axios.js文件
import axios from "axios"
function $axios(app){
    axios.defaults.baseURL="http://127.0.0.1:5173/api"
    app.config.globalProperties.$axios=axios
}
export default $axios;

 

在组件中使用封装到js文件中去的公共属性axios

//组件内:
//1.钩子函数中获取实例对象: 
//2.获取公共属性中的数据
<script setup>
    import {onMounted,getCurrentInstance} from "vue"
    // import axios from "axios"
    let {proxy}=getCurrentInstance()
    onMounted(async ()=>{
        //axios.defaults.baseURL="http://127.0.0.1:5173/api"        
        let res=await proxy.$axios('/test')//"http://127.0.0.1:5173/api/test"==>"http://127.0.0.1:7001/test"
        console.log(res,proxy.$hqyj,11111111111)
    })    
</script>