Vue2,Vue3全局挂载

一、全局挂载 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

vue2中挂载全局 

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

import Vue from 'vue' 
import Axios from 'axios 
import utils from '@/utils' 
import qs from 'qs' ... //挂载全局对象 
Vue.prototype.$http = Axios; 
Vue.prototype.$qs = qs 
....

vue3中挂载全局   

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

import { createApp } from 'vue' 
import App from './App.vue' 
import router from './router/index' 
import axios from './utils/axios' 
import qs from 'qs' 
 
const app = createApp(App) //全局挂载 
app.config.globalProperties.$axios = axios; 
app.config.globalProperties.$qs = qs; 
...

二、使用全局 在vue2中使用  

vue2中使用

this.$http ， 
this.$qs 
<script> 
    export default { 
        data() { 
              return { dataList: [] } 
        }, 
        mounted() { 
            this.getList() 
        }, 
        methods: {
             getList() { 
                this.$http({ url: 'url地址' }).then(res=>{ let { data } = res.data                                 
              this.dataList = data }) 
             }, 
        }, 
    } 
</script>

在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) }) 
    } 
}