vue3 + typescript 全局挂载 axios

最新推荐文章于 2025-06-23 23:47:41 发布

原创最新推荐文章于 2025-06-23 23:47:41 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue.js #vue3

vue 专栏收录该内容

9 篇文章

订阅专栏

本文对比了Vue2与Vue3中axios的全局挂载方法，着重讲解了Vue3中如何在typescript项目中使用setup语法糖，并介绍了创建hook解决typescript类型问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2 全局挂载 axios

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

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

vue2 使用全局挂载 axios

this.$http.get()

vue3 全局挂载 axios

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

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

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

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

这里要注意使用的是 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
    }
}

在组件页面导入 useCurrentInstance.ts

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

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

</script>