vue3 + typescript 全局挂载 axios_vue怎么全局导入axios typescript

vue2 全局挂载 axios

import Vue from 'vue'
import http from './api'
Vue.prototype.$http = http;
1
2
3

注：api 是封装了 axios 的文件夹，这里不详细列出

vue2 使用全局挂载 axios

this.$http.get()
1

vue3 全局挂载 axios

import { createApp } from 'vue'
import http from './api'
const app = createApp(App);
app.config.globalProperties.$http = http
1
2
3
4

可以看出，vue3 全局挂载是挂载在 globalProperties，vue2 则是挂载在 prototype

vue3 (非 typescript) 使用全局挂载 axios
这里使用 setup 语法糖

import { getCurrentInstance } from 'vue';
<script setup >
const { proxy } = getCurrentInstance();
proxy.$http.get()
</script>
1
2
3
4
5

这里要注意使用的是 getCurrentInstance 的 proxy，不是 ctx，ctx 在生产环境获取不到全局挂载

使用上面的方法，在 typescript 下是会报错的
所以 vue3 (typescript) 使用全局挂载 axios
建 hook 文件夹，里面建 useCurrentInstance.ts

useCurrentInstance.ts 添加代码：

import { getCurrentInstance,
ComponentInternalInstance } from 'vue'

export default function useCurrentInstance() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const proxy = appContext.config.globalProperties
    return {
        proxy
    }
}
1
2
3
4
5
6
7
8
9
10

在组件页面导入 useCurrentInstance.ts

<script setup lang="ts">
import useCurrentInstance from '@/hook/useCurrentInstance'

const {proxy} = useCurrentInstance()
console.log(proxy.$http)
//proxy.$http.get()

</script>
1
2
3
4
5
6
7
8

运行后，可以看到 axios 实例已经能够获取

搞定。