Vue3学习与实战 · 全局挂载使用Axios

在vue2中会习惯性的把axios挂载到全局，以方便在各个组件或页面中使用this.$http请求接口。但是在vue3中取消了Vue.prototype，在全局挂载方法和属性时，需要使用官方提供的globalPropertiesAPI。

一、全局挂载

提示： 可以通过打印getCurrentInstance()看到其中有很多全局对象，如：$route、$router、$store。如果全局使用了ElementUI后，还可以拿到$message、$dialog等等。

• 在vue2项目中，入口文件main.js配置Vue.prototype挂载全局方法对象：

  import Vue from 'vue'
  import router from '@/router'
  import store from '@vuex'
  import Axios from 'axios'
  import Utils from '@/tool/utils'
  import App from './App.vue'
   
  // ...
   
  /* 挂载全局对象 start */
  Vue.prototype.$http = Axios;
  Vue.prototype.$utils = Utils;
  /* 挂载全局对象 end */
   
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

  
  在vue3项目中，入口文件main.js配置globalProperties挂载全局方法对象：

  import { createApp } from 'vue'
  import router from './router'
  import store from './store'
  import Axios from 'axios'
  import Utils from '@/tool/utils'
  import App from './App.vue'
   
  // ...
   
  const app = createApp(App)
   
  /* 挂载全局对象 start */
  app.config.globalProperties.$http = Axios
  app.config.globalProperties.$utils = Utils
  /* 挂载全局对象 end */
   
  app.use(router).use(store);
  app.mount('#app')

  二、全局使用 

   在vue2中使用this.$http

  <script>
    export default {
      data() {
        return {
          list: []
        }
      },
      mounted() {
        this.getList()
      },
      methods: {
        getList() {
          this.$http({
            url: '/api/v1/posts/list'
          }).then(res=>{
            let { data } = res.data
            this.list = data
          })
        },
      },
    }
  </script>

  在vue3的setup中使用getCurrentInstanceAPI获取全局对象 

  <template>
    <div class="box"></div>
  </template>
  <script>
    import { ref, reactive, getCurrentInstance } from 'vue'
    export default {
      setup(props, cxt) {
        // 方法一 start
        const currentInstance = getCurrentInstance()
        const { $http, $message, $route } = currentInstance.appContext.config.globalProperties
        
        function getList() {
          $http({
            url: '/api/v1/posts/list'
          }).then(res=>{
            let { data } = res.data
            console.log(data)
          })
        }
        // 方法一 end
   
        // 方法二 start
        const { proxy } = getCurrentInstance()
        
        function getData() {
          proxy.$http({
            url: '/api/v1/posts/list'
          }).then(res=>{
            let { data } = res.data
            console.log(data)
          })
        }
        // 方法二 end
   
      }  
    }
  </script>

• 方法一：通过getCurrentInstance方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
• 方法二：通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。

•