vue3无法读取全局属性或者函数，this.$失效，app.config.globalProperties / Provide / Inject

之前在使用vue2时会坚持使用全局挂载函数或者变量来使用，十分方便
比如将网络请求接口封装在一个文件，然后挂载至全局

//main.js
import api from './api';
//全局变量
Vue.prototype.$api = api;

在需要使用的组件里直接this.$api就可以了

this.$api.someMethod();

但是vue3引入了组合式api写法，随之全局挂载变量或者函数的方法也随之改变

//main.js

import { createApp } from 'vue'
import App from './App.vue'
import api from './api';
const app = createApp(App)
// 官方推荐将全局变量写进 globalProperties下
//全局变量
//myOption 为自定义变量
app.config.globalProperties.myOption = 'myOption'
//全局函数其实也可以这样挂载：
//app.config.globalProperties.$api= api
//但是你无法再组合式api的写法里this.$api点出来，除非你使用了vue2的写法


app.mount('#app')

vue3推荐使用Provide / Inject 全局挂载变量或者函数

//main.js
import { createApp } from 'vue'
import api from './api';
import App from './App.vue'
const app = createApp(App)
//属性
app.provide('$test', '666')
//函数
app.provide('$api',api);

//组件内使用方法
import { inject } from 'vue'
//读取属性
const test = inject('$test')
//读取函数
 inject('$api').getToken(data).then(res=>{
   console.log(res)
  })

全局方法就是为了避免重复的引入操作，本来vue2直接this.$就方便多了，只能这样用了！