我一直在与Vue、TypeScript和Axios作斗争,但我无法找到一个令人满意的解决方案。
大多数的向导会告诉你这样做:
Main.ts
import axios from 'axios';
Vue.prototype.$http = axios;
然后使用$http。TypeScript不喜欢这样:
属性“$http”在类型CombinedVueInstance上不存在
如何全局注册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
函数并尝试执行请求错误:
TypeError:“this.$http is undefined”
下面的代码应该放在哪里?
export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
// do stuff with options
Vue.prototype.$http = Axios;
}
2条答案
按热度按时间piok6c0g1#
我相信你必须将它注册为一个类型脚本声明文件-所以创建一个名为'axios-plugin.d.ts'的单独文件并放入:
那么你应该可以在需要的地方访问
Vue.$http
。Vue.prototype.$http = axios;
可以在纯javascript中工作,但Typescript迫使你声明所有内容,但你得到了甜蜜的类型检查。你可以在这里看到一些关于定义文件的更一般的信息,沿着一个Axios示例:如何增加Vue类并保持类型脚本定义同步
6l7fqoea2#
以下是如何在Vue 3 TypeScript应用程序中创建全局Axios示例的示例:
首先,使用npm或yarn安装Axios:
接下来,创建一个新文件(例如axios.ts)来配置Axios示例:
在Vue 3 TypeScript组件中,您可以导入Axios示例并使用它来发出API请求:
通过使用这种方法,您可以在所有组件中重用相同的Axios示例,并使用共享的设置和拦截器发出一致的API请求。