Question

在main.ts中：

Vue.prototype.$http = http

然后在一个类中的另一个组件中，我无法调用this.$http。我已经读过有关增强类型的信息，但无法弄清楚该文件的放置位置，调用方式，关于该主题的文档不是很清楚：https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

所以我创建了一个文件'src / types / vue.d.ts'：

import Vue from 'vue'
import http from '@/http'

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

http.ts的内容：

import axios from 'axios'

const HTTP = axios.create({
  baseURL: process.env.VUE_APP_API_URL
})

export default {
  login(credentials: any) {
    return HTTP.post('/auth', {
      account_email: credentials.email,
      account_password: credentials.password
    })
  }
}

但是我仍然不能在组件中使用this.$http。我的目标是在每个组件中全局使用this.$http引用http.ts（此处为axios模块）。

Answer 1

您不能将$http的类型声明为值，而是进行新的输入：

// http.d.ts

export default interface {
  login(credentials: any): PromiseLike<any> 
}

然后将其用作您的键入声明：

import http from '@/types/http'

...
interface Vue {
  $http: http
}

现在通过点击上面评论中的链接来创建您的http.ts：

import _Vue from 'vue'
import axios from 'axios'

const http = {
  login(credentials: any) {
    return HTTP.post('/auth', {
      account_email: credentials.email,
      account_password: credentials.password
    })
  }
}

export function http(Vue: typeof _Vue): void {
  Vue.prototype.$http = http;
}

现在您需要导入http.ts文件，并以Vue.use之类的文件main.ts

import Http from '@/http'

Vue.use(Http)

现在您的组件可以使用您的http插件：

mounted() {
  this.$http.login(credentials)
  .then((response) => console.log(response))
  .catch((error) => console.warn(error))
}

Vue.prototype。$ property不适用于Typescript

1 个答案: