vue3.0中axios的使用，用this报错

由于vue3.0中setup()里不再使用this，所以常见的this.$axios方式也不能再用。

1. 使用axios挂载到原型上

import axios from 'axios'
//  这里也可以引入封装后的axios挂载到原型上
app.config.globalProperties.$api = axios

// home.vue中的使用
import { getCurrentInstance } from 'vue'
export default {
  name: 'Home',
  setup () {
  	const internalInstance = getCurrentInstance()
    internalInstance.ctx.$api.get('/hello').then()
    // 生产环境下proxy可能会获取不到$api，可使用internalInstance.appContext.config.globalProperties
    
    //  或者使用proxy访问
    const { proxy } = getCurrentInstance()
    proxy.$api.get() 
  }
 }
 

2.使用vue-axios，结合vue.use()和provied-inject

//  npm install --save axios vue-axios
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)

// 在home.vue中使用
import { inject } from 'vue'
export default {
  name: 'Home',
  setup () {
  	const axios = inject('axios')
  	console.log(axios)
  }
}

3.封装好后在每隔.vue页面使用的时候都 import 一次