vue3 设置 axios 的baseURL之后无法通过 this.$http 调用不了了？

Question

想封装axios，将请求域名和头部直接封装进去，方便调用。
但在vue视图文件中调用的时候，提示没有这个变量。

# src/main.js
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import axios from './plugins/axios' // 这里引入了封装的axios
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'


createApp(App).use(router).use(axios).mount('#app')

# src/plugins/axios.js
import axios from 'axios'


const myAxios = axios.create({
    baseURL: 'http://127.0.0.1:9201'
})


myAxios.interceptors.request.use(function (config) {
    let jwt = localStorage.getItem('jwt')
    config.headers.common.Authorization = `Bearer ${jwt}`
    config.headers.common['X-Client-By'] = 'vue3'
    return config;
}, function (error) {
    return Promise.reject(error)
});

myAxios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    return Promise.reject(error);
})

myAxios.install = (app, option) => {
    app.config.globalProperties.$http = myAxios // 这里都有执行的
}

export default myAxios

# src/views/Login.vue

<template>
  <div class="container">
    <form method="post" @submit="submit">
      <div class="row mb-3">
        <label for="name" class="col-sm-3 col-form-label">user</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="name" v-model="name" required>
        </div>
      </div>
      <div class="row mb-3">
        <label for="pwd" class="col-sm-3 col-form-label">pwd</label>
        <div class="col-sm-9">
          <input type="password" class="form-control" id="pwd" v-model="pwd" required>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      pwd: ''
    }
  },
  methods: {
    submit: async (e) => {
      e.preventDefault()
      console.log(this.$http) // 加入这一句之后报错了，提示没有这个属性
    }
  }
}
</script>

很疑问，在src/main.js中都引入了src/plugins/axios.js并且都加入了这个plugin，但到了视图中却无法使用了。

Answer 1

import { getCurrentInstance } from 'vue'
export default {
    setup(props, cxt){
    const { proxy } = getCurrentInstance()
    console.log(proxy.$http)
    return {}
  }
}

你这也不是vue3写法啊

Answer 2

在 vue2 中是通过原型挂载才能将方法挂到组件的 this 上
Vue.prototype.$http = myAxios
vue3 里面

app.config.globalProperties.$http

显然没有把方法挂载到Vue原型上，不能通过this拿到呀。像楼上描述的那样，你只是挂到了vue3 提供的一个全局变量上了而已。

Answer 3

用vue3就应该抛弃vue2语法了，建议像一楼那样用