由于vue3.0中setup()里不再使用this,所以常见的this.$axios方式也不能再用。
- 使用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 一次