vue3全局变量定义使用

当自己尝试用vue3开发项目时候遇到需要全局变量使用时候怎么办？vue2处理很简单在原型链上使用挂载
api.js

import http from './http'//拦截器
const api = {
	async getUserInfo(params){
		return await http.post('/getUserInfo',{...param})
	}
}
export const ApiPlugin = {
	install(Vue){
		Vue.prototype.$http = api
	}
}

main.js

import Vue from 'vue'
import {ApiPlugin} from '@/api'
Vue.use(ApiPlugin)

但是到了vue3无法直接在原型链上直接挂载自定义属性
百度有很多推荐main.js中：通过app.config.globalProperties将组件或者方法、变量挂载在全局，这种方法个人很用不惯，在未读源码时候不知道这个globalProperties会有啥问题。
这里就是用一个vue2也有的方法provide/inject,vue3也一样可以使用。
使用方法就是在通过provide/inject发放到全局都使用这个变量。
还是一样先定义接口文件
api.js

import http from "./http";

export const api = {
    async getUserInfo(){
        return await http.get('/userInfo')
    }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { api } from "@/api/index";
onst app = createApp(App)
app.use(store).use(router).mount('#app')
app.provide('api', api);//全局发送api

任何一个子组件
child.js

<script>
import { useStore } from "vuex";
import { inject, onBeforeMount, ref } from "vue";
export default {
    name: 'Child',
    setup(props) {
        const $http = inject('api')
        onBeforeMount(async() => {
            const res = await $http.getUserInfo()
            console.log(res);
            //...其余操作
        })
    },
}
</script>