뷰 주어진 Axios의에 사용 장착 뷰 + 타이프 라이터 때

에서 vue프로젝트 개발 프로세스, 전화의 다양한 구성 요소를 용이하게하기 위해 axios다음과 같이, 우리는 일반적으로, 입구 VUE 프로토 타입 파일에서 몸에 장착 Axios의 것입니다 :
main.ts

import Vue from 'vue'
import axios from './utils/http'
Vue.prototype.$axios = axios;

이 경우, 우리가 요청할 때, 다양한 구성 요소에서 직접 사용할 수 this.$axios있지만, TS 사용하여 this.$axios요청하는 경우, 그것은 다음과 같이 제공됩니다 :

그림에서 우리는 그 뷰 $ Axios의 몸에서 검출되지 TS 볼 수 있습니다. 에 의해
발견 온라인 액세스 : $ Axios의 아래 VUE 매달려 인식되지는 TS의 프로토 타입 체인에 걸려 할 수 없습니다. 우리가 수동으로 뷰 프로토 타입 몸이 $ Axios의 마운트 것으로, TS 식별 할 수 없습니다.

해결 방법 1 : 수동 유형 검색이 말했다 TS 여기에 무시

TS는 뷰 프로토 타입 바디를 감지 할 수 있지만 prototype, 그러나 사실 우리는 우리가 일반적으로 사용 될 수 있음을, A가 성공적으로 탑재하고, 해결할 수있는 유일한 필요가 문제의 유형 TS를 발견, 그래서 우리가 같이이를 지정할 수 있습니다 any유형, 그래서 당신은 문제가 주어지고 피할 수 있습니다. 다음과 같습니다 :

(this as any).$axios
    .post("/api/users/login", this.ruleForm)
    .then((res: {data:any}) => {}

그러나 사용하는 any보안 유형의 손실을 의미합니다, 당신은 지원 도구를 얻을 수 없습니다.

해결 방법 2 : 사용하여 `vue-axios`장착이 문제에 대처하기 위해이 패키지를

우리가 사용할 수있는 vue-axios이 문제 실장 형 패키지를 처리 할 수 있습니다. VUE-Axios의 플러그 인 Vue.prototype 프로토 타입을 기반으로 Axios의의 확장, Axios의를 사용하는 것이 더 편리 할 수 있습니다 속성 $ HTTP를 확장합니다.

# 安装
npmi axios
npm i vue-axios -S

# 注册
Vue.use(axios,vue-axios)

# 使用
this.axios()

사용하여 vue-axios패키지를, 우리가 직접 할 수 this.axios호출합니다.

위에서 우리는 볼 수 있습니다 vue-axios에 도움을 준 Vue마운트 프로토 타입 본체 axios및 감지 TS 될 수 있습니다. 이것은 완벽한 TS의 문제가 주어지고 방지 할 수 있습니다.

설명

TS 개발 프로세스를 사용하여 오류가 다시 구덩이에 다음 단계를 피하기 위해, 희망 레코드에 다양한 문제가 발생할뿐만 아니라, 다른 사람들을 돕기 위해 할 것입니다.