如何在 Vue 和 TypeScript 应用中正确的全局注册 axios

Posted 2023-02-22

【中文标题】如何在 Vue 和 TypeScript 应用中正确的全局注册 axios

【英文标题】：How to Properly Register axios Globally in Vue & TypeScript Application

【发布时间】：2019-11-12 23:54:10

【问题描述】：

我一直在与 Vue、TypeScript 和 Axios 进行斗争，但我无法找到令人满意的解决方案。

大多数指南会告诉您这样做：

Main.ts

import axios from 'axios';

Vue.prototype.$http = axios;

然后使用 $http。 TypeScript 不喜欢这样：

CombinedVueInstance 类型上不存在属性“$http”

如何全局注册 axios 并避免任何 TypeScript 错误？

根据下面@GentlemanCrow 的回答，我在我的根目录中创建了一个名为：

axios-plugin.d.ts

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void 
    // do stuff with options
    Vue.prototype.$http = Axios;


export class AxiosPluginOptions 
    // add stuff


import  AxiosStatic  from 'axios';

declare module 'vue/types/vue' 
    interface Vue 
        $http: AxiosStatic;
    

这会产生错误：

(TS) 不能在环境上下文中声明实现。

在Vue.prototype.$http = Axios; 上，错误是：

环境上下文中不允许使用语句。

删除export function AxiosPlugin 函数并尝试执行请求错误：

类型错误：“this.$http 未定义”

下面的代码应该去哪里？

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void 
    // do stuff with options
    Vue.prototype.$http = Axios;

【参考方案1】：

我相信你必须将它注册为一个打字稿声明文件 - 所以创建一个名为“axios-plugin.d.ts”的单独文件并放入：

import _Vue from 'vue';
import Axios from 'axios';

export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void 
    // do stuff with options
    Vue.prototype.$http = Axios;


export class AxiosPluginOptions 
    // add stuff


import  AxiosStatic  from 'axios';

declare module 'vue/types/vue' 
    interface Vue 
        $http: AxiosStatic;
    

那么你应该可以在你需要的地方访问Vue.$http。

Vue.prototype.$http = axios; 可以在纯 javascript 中工作，但 Typescript 会强制您声明所有内容，但您会得到甜蜜、甜蜜的类型检查。

您可以在此处查看有关定义文件的更多一般信息，以及 Axios 示例：How to augment the Vue class and keep typescript definition in sync

【讨论】：

谢谢，已经尝试过这种方法，但仍有一些问题。将进行调查。

我不知道把这段代码放在哪里才能让它工作。你能看看我更新的问题吗？

这是另一种方式 - 这个项目 vue-axios (github.com/imcvampire/vue-axios) 会给你一个全局的 Vue.axios 变量。repo 实际上只有两个文件（index.d.ts 和 src/index. ts)，所以如果你想自己重新实现它并获得Vue.$http，你可以。