使用 Vuex mapGetters 时如何修复 TypeScript 错误?
Posted
技术标签:
【中文标题】使用 Vuex mapGetters 时如何修复 TypeScript 错误?【英文标题】:How to fix TypeScript errors when using Vuex mapGetters? 【发布时间】:2018-07-07 02:32:02 【问题描述】:使用mapGetters
时,TypeScript 无法查看绑定到 Vue 组件的 getter,因此会引发错误。示例:
import Vue from 'vue';
import mapActions, mapGetters from 'vuex';
export default Vue.extend(
computed:
...mapGetters('ui', ['navCollapsed']),
minimizerIconClass(): string
return `fa$this.navCollapsed ? '' : 'r' fa-window-maximize`;
,
,
TypeScript 对 this.navCollapsed
大喊大叫:
TS2339: Property 'navCollapsed' does not exist on type 'CombinedVueInstance<Vue, , openMobileMenu(): void; , minimizerIconClass: string; , Readon...'.
我该如何解决这个问题?我能想到的唯一解决方法是不使用mapGetters()
。
【问题讨论】:
你可以使用假的this
参数:minimizerIconClass(this: ComponentTypeHere)
。 (仅在编译时存在,在编译时被剥离)
ComponentTypeHere
的示例是什么? (抱歉,TypeScript 很新)
在这个具体的例子中可能只是 navCollapsed: boolean
。 (需要更多信息,不确定navCollapsed
来自哪里)
navCollapsed
正在被mapGetters()
注入。
@ffxsam 你找到解决这个问题的方法了吗?
【参考方案1】:
我建议将 vuex-class 用于带有 Typescript 的装饰器。
但是如果你不想要额外的依赖,我相信使用this['navCollapsed']
而不是this.navCollapsed
应该可以解决编译错误。
【讨论】:
【参考方案2】:我遇到了同样的问题并做了以下操作:
declare module "vuex"
interface TMapGetters
<TGetters>(getterNames: Array<keyof TGetters>): Partial<TGetters>;
export const mapGetters: TMapGetters;
然后在我的商店中定义:
interface TGetters
navCollapsed: boolean;
现在我可以在我的组件中做:
type TThis = TGetters & TData & TMethods & TComputed & TProps;
export default Vue.extend<TData, TMethods, TComputed, TProps>(
computed:
...mapGetters<TGetters>([
'navCollapsed',
],
minimizerIconClass(this: TThis): string
return `fa$this.navCollapsed ? '' : 'r' fa-window-maximize`;
远非完美,但它会检测传递给mapGetters
的数组中的拼写错误,并允许您在this
上使用(正确输入的)getter。
但是,TypeScript 不会知道您是否确实映射了相关的 getter。
【讨论】:
你好,你能给出这个解决方案的完整实现吗? TMethods、TComputed、TData 和 TProps 的定义我不明白。以上是关于使用 Vuex mapGetters 时如何修复 TypeScript 错误?的主要内容,如果未能解决你的问题,请参考以下文章
vuex2中使用mapGetters/mapActions报错解决方法
在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`