Vue.prototype.$property 不适用于 Typescript

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

Vue 3 答案

增强 Vue 以支持您的自定义组件属性是通过 module augmentation 完成的。要添加您的 $http 声明并支持它，您可以创建 vue-shim.d.ts 文件并增加 vue/runtime-core

import axios from 'axios'

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $http: typeof axios
  }
}

Vue 还断言，对于版本 3，您必须将其导入或导出为 ts 文件中的顶级代码行，以确保将其视为模块：

确保声明文件是 TypeScript 模块 为了利用模块扩充，您需要确保文件中至少有一个顶级导入或导出，即使它只是 export {}。

现在，当您安装自定义插件时，您可以将其挂在 app.config.globalProperties 对象上：

// my-custom-plugin.js
import axios from 'axios'
import http from 'plugins/http'

export default {
  install (app, options) {
    app.config.globalProperties.$http = http
  }
}

请参阅下面的 Vue 2 答案。

Vue 2 答案

您不能将$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))
}