1、vue2中全局挂载axios:

在vue2项目中,在入口文件main.js中通过Vue.prototype挂载全局方法对象。

import axios from 'axios'

//将包挂载到vue的原型对象上
Vue.prototype.$http = axios

vue3中全局挂载axios

vue3的基本使用(超详细)_luofei_create的博客-CSDN博客 

vue3中取消了Vue.prototype,需要使用官方提供的globalPropertiesAPI在全局挂载方法和属性。

// 引入使用axios
import axios from 'axios';
//将包挂载到vue的原型对象上
const app = createApp(App)
app.config.globalProperties.$http = axios;

app.use(store).use(router).mount('#app')

2、使用全局变量

在vue2中使用:

vue2中使用this.$http , this.$qs

在vue3中使用:

在vue3的setup中是使用getCurrentInstanceAPI获取全局对象

//方法一
<script>
    import {useRouter} from 'vue-router';
    import {toRefs,getCurrentInstance} from 'vue';
    export default{
        setup(){
            const router = useRouter();
            const {proxy} = getCurrentInstance();
            const submit = () =>{
                proxy.$axios.post('/adminUser/login',{
                     userName:state.ruleForm.username || '',
                     passwordMd5:md5(state.ruleForm.password)
                 }).then(res=>{
                     console.log(res)
                 })
            }
            return{
                submit
            }
        }
        mounted(){
            this.submit()
        }
    }
</script>
 
.....
//方法二:
...
setup(){
    const currentInstance = getCurrentInstance()
    const {$axios,$route} = currentInstance.appContext.config.globalProperties
    function submit(){
        $axios.post('/adminUser/login',{
              userName:state.ruleForm.username || '',
              passwordMd5:md5(state.ruleForm.password)
        }).then(res=>{
               console.log(res)
       })
    }
}

通过getCurrentInstance()可以得到许多的全局对象。

总结
vue2中通过Vue.prototype来挂载全局对象,然后通过this.$XXX来获取全局对象。

vue3中通过app.config.globalProperties.$xxx = xxx来挂载全局对象,然后有两种方法来获取:

通过getCurrentInstance()方法获取上下文,这里的proxy就相当于this。例如:proxy.$axios
通过getCurrentInstance()方法获取当前实例,在根据当前实例找到全局实例对象appContext,进而拿到全局实例的config.galbalProperties。
 

日常记录,原文如下:

Vue全局挂载axios_禾木白的博客-CSDN博客

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐