脚本宝典收集整理的这篇文章主要介绍了Vue3学习与实战 · 全局挂载使用Axios，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

一、全局挂载

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

• 在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>

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

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

欢迎访问：天问博客

脚本宝典总结

以上是脚本宝典为你收集整理的Vue3学习与实战 · 全局挂载使用Axios全部内容，希望文章能够帮你解决Vue3学习与实战 · 全局挂载使用Axios所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。