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了。