vue3 axios全局挂载与使用_vue3全局挂载axios

vue2中 axios直接挂载在vue的原型上，vue3则不同；

一、 在main.js中引入axios

// main.js
/** 全局挂载对象 globalProperties */
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'utils/http' // 这里引入本地封装好的axios

const app = createApp(App)
app.config.globalProperties.$axios = axios // 使用globalProperties挂载
app.use(store).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11

二、 组件中使用

// xxx.vue
import { reactive, getCurrentInstance } from 'vue' // 0.引入getCurrentInstance
// ...
setup(){
  const user = reactive({ username: 'admin', password: '123456' })
  const { proxy } = getCurrentInstance() // 1.获取proxy实例
  const handleLogin = async () => {
    try {
      // 2.通过proxy发起请求
      const result = await proxy.$axios.post('/api/login', {
      	username: user.username,
      	password: user.password,
      })
      console.log('成功：', result);
    } catch (e) {
      console.log('请求失败')
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

其实 通过axios封装对接口进行统一管理会更为优雅，感兴趣的同学可以参考我的下一篇。but, 目前还没写好嘿嘿， 写好了再说哦