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