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

Question

当使用 mapGetters 时，TypeScript 无法看到绑定(bind)到 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()。

Answer 1

我建议使用 vuex-class用于带有 Typescript 的装饰器。

但如果您不想要额外的依赖项，我相信使用 this['navCollapsed'] 而不是 this.navCollapsed 应该可以解决编译错误。