在vue2
中會習慣性的把axios
掛載到全域性,以方便在各個元件或頁面中使用this.$http
請求介面。但是在vue3
中取消了Vue.prototype
,在全域性掛載方法和屬性時,需要使用官方提供的globalProperties
API。
一、全域性掛載
- 在
vue2
專案中,入口檔案main.js
配置Vue.prototype
掛載全域性方法物件:
import Vue from 'vue'
import router from '@/router'
import store from '@vuex'
import Axios from 'axios'
import Utils from '@/tool/utils'
import App from './App.vue'
// ...
/* 掛載全域性物件 start */
Vue.prototype.$http = Axios;
Vue.prototype.$utils = Utils;
/* 掛載全域性物件 end */
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- 在
vue3
專案中,入口檔案main.js
配置globalProperties
掛載全域性方法物件:
import { createApp } from 'vue'
import router from './router'
import store from './store'
import Axios from 'axios'
import Utils from '@/tool/utils'
import App from './App.vue'
// ...
const app = createApp(App)
/* 掛載全域性物件 start */
app.config.globalProperties.$http = Axios
app.config.globalProperties.$utils = Utils
/* 掛載全域性物件 end */
app.use(router).use(store);
app.mount('#app')
二、全域性使用
- 在
vue2
中使用this.$http
:
<script>
export default {
data() {
return {
list: []
}
},
mounted() {
this.getList()
},
methods: {
getList() {
this.$http({
url: '/api/v1/posts/list'
}).then(res=>{
let { data } = res.data
this.list = data
})
},
},
}
</script>
- 在
vue3
的setup
中使用getCurrentInstance
API獲取全域性物件:
<template>
<div class="box"></div>
</template>
<script>
import { ref, reactive, getCurrentInstance } from 'vue'
export default {
setup(props, cxt) {
// 方法一 start
const currentInstance = getCurrentInstance()
const { $http, $message, $route } = currentInstance.appContext.config.globalProperties
function getList() {
$http({
url: '/api/v1/posts/list'
}).then(res=>{
let { data } = res.data
console.log(data)
})
}
// 方法一 end
// 方法二 start
const { proxy } = getCurrentInstance()
function getData() {
proxy.$http({
url: '/api/v1/posts/list'
}).then(res=>{
let { data } = res.data
console.log(data)
})
}
// 方法二 end
}
}
</script>
- 方法一:通過
getCurrentInstance
方法獲取當前例項,再根據當前例項找到全域性例項物件appContext
,進而拿到全域性例項的config.globalProperties
。 - 方法二:通過
getCurrentInstance
方法獲取上下文,這裡的proxy
就相當於this
。
提示: 可以通過列印getCurrentInstance()
看到其中有很多全域性物件,如:$route
、$router
、$store
。如果全域性使用了ElementUI
後,還可以拿到$message
、$dialog
等等。
歡迎訪問:天問部落格