置顶

Vue3学习与实战 · 全局挂载使用Axios


字数:609 阅读时长:2分钟 阅读:85

vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口。但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI。

Vue3 全局Axios

一、全局挂载

  • vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// vue 2.x

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挂载全局方法对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// vue 3.x

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// vue 2.x

<template>
<div></div>
</template>
<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>
  • vue3setup中使用getCurrentInstanceAPI获取全局对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// vue 3.x

<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>
  1. 方法一:通过getCurrentInstance方法获取当前实例,再根据当前实例找到全局实例对象appContext,进而拿到全局实例的config.globalProperties
  2. 方法二:通过getCurrentInstance方法获取上下文,这里的proxy就相当于this

提示: 可以通过打印getCurrentInstance()看到其中有很多全局对象,如:$route$router$store。如果全局使用了ElementUI后,还可以拿到$message$dialog等等。


《Vue3学习与实战》系列


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-11-24
最后更新: 2021-11-26
本文标题: Vue3学习与实战 · 全局挂载使用Axios
本文链接: https://www.tiven.cn/p/7f7ba3b2/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
知识共享许可协议
畅所欲言