vue3.0封装接口api，并将api挂载到app原型上

将调用后端接口的方法写在接口文件里统一管理，然后在统一挂载在app的原型上，这样使用时就不需要import方法来引入了

首先来封装api接口 api/user.js

import { request } from '@/service/request'
const url = 'userManageApi'
const userApi = {}
// 获取验证码
userApi.getCaptchaApi = (data) => {
  return request({
    url: url + '/users/captcha',
    method: 'get',
    data
  })
}
export default userApi

 将各个api文件集合到一个文件内，然后可以统一挂载在app的原型上

import userApi from './user.js'
export default {
  userApi
}

在main.js中挂载在原型上面，全局都可以使用，但是Vue3无法像Vue2一样直接在原型上放置数据

import api from '@/api/index.js'
const app = createApp(App)
app.config.globalProperties.$api = api // 全局挂载api
app.mount('#app')

使用

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
let res = await proxy.$api.userApi.getCaptchaApi()