Vue+Typescript中在Vue上掛載axios使用時報錯問題
在vue項目開發(fā)過程中，為了方便在各個組件中調(diào)用axios，我們通常會在入口文件將axios掛載到vue原型身上，如下：
main.ts
import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios;
這樣的話,我們在各個組件中進行請求時，就可以直接使用this.$axios，但是在ts中使用this.$axios進行請求時，會進行報錯,如下所示：
從圖中我們可以看出ts在Vue身上檢測不到$axios。通過
在網(wǎng)上查閱發(fā)現(xiàn)：在ts中，不識別vue下面掛$axios，不可以掛在原型鏈上。也就是說我們手動在Vue原型身上掛載$axios,ts無法識別到。
解決方法1：手動告訴ts忽略這里的類型檢測
雖然ts無法檢測到Vue原型身上的prototype,但是實際上我們是掛載成功的，也就是說我們是可以正常使用的，唯一需要解決的是ts的類型檢測問題，因此，我們可以指定this為any類型，這樣的話就可以避免報錯問題。如下所示：
(this as any).$axios
.post("/api/users/login", this.ruleForm)
.then((res: {data:any}) => {}
但是使用any意味著失去了類型安全保障，并且你得不到工具的支持。
解決方法2：使用vue-axios這個包來處理這個掛載問題
我們可以通過使用vue-axios這個包來處理這個掛載問題。vue-axios 是在axios基礎(chǔ)上擴展的插件，在Vue.prototype原型上擴展了$http等屬性，可以更加方便的使用axios。
# 安裝 npmi axios npm i vue-axios -S # 注冊 Vue.use(axios,vue-axios) # 使用 this.axios()
通過使用vue-axios包,我們可以直接使用this.axios進行調(diào)用。
從上面我們可以看出vue-axios幫助我們實現(xiàn)了在Vue原型身上掛載axios，而且能夠被ts檢測到。這樣就完美避免了ts報錯的問題。
說明
使用ts進行開發(fā)的過程中，會遇到各種各樣的報錯問題，希望記錄下來，避免下次再次踩坑，也希望幫助其他人。
總結(jié)
以上所述是小編給大家介紹的Vue+Typescript中在Vue上掛載axios使用時報錯,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue.js實現(xiàn)標簽頁切換效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了修改vue源碼實現(xiàn)動態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了vue組件編寫之todolist組件的實例講解，本文給大家介紹的非常詳細,需要的朋友可以參考下2018-01-01
在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細講解在Vue3中如何實現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07
這篇文章主要介紹了Vue3中的組件數(shù)據(jù)懶加載問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue項目兼容ie11的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue獲取input值的三種常用寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue?禁止重復(fù)點擊發(fā)送多次請求的實現(xiàn)
本文主要介紹了vue?禁止重復(fù)點擊發(fā)送多次請求的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
前端vue按1920*1080設(shè)計圖的頁面適配屏幕縮放并適配4K屏詳解
最近在做一個數(shù)據(jù)可視化的項目,整個項目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設(shè)計圖的頁面適配屏幕縮放并適配4K屏的相關(guān)資料,需要的朋友可以參考下2022-11-11