如何修复使用Vuex mapGetters时的TypeScript错误？

slsn1g29 于 2022-11-30 发布在 Vue.js

关注(0)|答案(3)|浏览(148)

当使用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()。

vue.js

来源：https://stackoverflow.com/questions/48483591/how-to-fix-typescript-errors-when-using-vuex-mapgetters

3条答案

按热度按时间

00jrzges1#

我建议将vuex-class用于带Typescript的装饰器。
但是如果您不想使用额外的依赖项，我相信使用this['navCollapsed']而不是this.navCollapsed应该可以解决编译错误。

赞(0）回复(0）举报 2022-11-30

2wnc66cl2#

我也遇到了同样的问题，并采取了以下措施：

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将不知道您是否确实Map了所讨论的getter。

赞(0）回复(0）举报 2022-11-30

oyt4ldly3#

在我的例子中，mapGetters在计算之外。把它放在那里解决了错误。

赞(0）回复(0）举报 2022-11-30