vue在使用ts时如何使用axios

在vue中使用typescript时,当你想要在全局按照this.$axios这种形式来使用axios话,我们首先要将axios挂载到vue的原型上,使之能够在全局使用。

Vue.use(v => {
  v.prototype.$axios = axios
})

但是,这样还不行,typescript并不知道$axios这个属性是什么,即使被挂载到了vue的原型上,它也是不能感知的,所以,要告诉typescript一下,使用typescript的声明合并方式来对vue的这个模块进行扩展。

import axios, { AxiosInstance } from 'axios'

declare module 'Vue/types/vue' {
  interface Vue {
    $axios: AxiosInstance
  }
}

这样就相当于告诉ts编译器,我在vue上挂载了一个$axios属性,接着,在.vue模板中不需要再额外引入axios就可以直接使用this.$axios来请求api了。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注