vue3.0之全局变量app.config.globalProperties的使用

添加⼀个可以在应⽤的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权

这可以代替 Vue 2.x Vue.prototype 扩展：

//之前(Vue 2.x)
Vue.prototype.$http =()=>{}
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http =()=>{}

当我们想在组件内调⽤http时需要使⽤getCurrentInstance()来获取

import { getCurrentInstance, onMounted } from "vue";
export default{
setup(){
const{ ctx }=getCurrentInstance();//获取上下文实例，ctx=vue2的this
onMounted(()=>{
      console.log(ctx,"ctx");
      ctx.http();
     });
   },
};

getCurrentInstance代表上下⽂，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适⽤于开发阶段，如果将项⽬打包放到⽣产服务器上运⾏，就会出错，ctx⽆法获取路由和全局挂载对象的。此问题的解决⽅案就是使⽤proxy替代ctx，代码参考如下。

import { getCurrentInstance } from 'vue'
export default({
name:'',
setup(){
const{ proxy }=getCurrentInstance()// 使用proxy代替ctx,因为ctx只在开发环境有效
onMounted(()=>{
      console.log(proxy,"proxy");
      proxy.http();
     });
    }
})