在 TypeScript 和 Vue 中使用 mapGetters答案

【问题标题】：Using mapGetters in TypeScript and Vue在 TypeScript 和 Vue 中使用 mapGetters
【发布时间】：2020-10-15 17:54:20
【问题描述】：

对此我找不到直接的答案，而且我不太擅长 TS。如何将 Vue 中的这些计算属性转换为在 TypeScript 文件中使用？

  computed: {
      ...mapGetters({
         getLoggedInUserFirstName: "Common/getLoggedInUserFirstName",
         getLoggedInUserLastName: "Common/getLoggedInUserLastName"
      })
  }

【问题讨论】：

this 有帮助吗？向下滚动到底部的 Vuex。
您想在组件中还是在 TS 文件中使用它？
@Charlie 一个 Vue 组件文件。在 TS 脚本内部。谢谢

标签： typescript vue.js vuex

【解决方案1】：

根据@LOTUSMS cmets，他说他在 Vue 文件中使用。

嗯，你有两个选择。如果您使用基于类的语法 a.k.a:

@Component({})
export default class MyComponent extends Vue {
  ...
}

您可以执行以下操作：

@Component({
  computed: {
    ...mapGetters({
      getLoggedInUserFirstName: "Common/getLoggedInUserFirstName",
      getLoggedInUserLastName: "Common/getLoggedInUserLastName"
    })
  }
})
export default class MyComponent extends Vue {
  // if you can you can denote the type with:
  // public getLoggedInUserFirstName!: string;
  public getLoggedInUserFirstName!;

  public getLoggedInUserLastName!;
}

如果您使用的是扩展版本，您可以像以前一样简单地使用它：

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  computed: {
    ...mapGetters({
      getLoggedInUserFirstName: "Common/getLoggedInUserFirstName",
      getLoggedInUserLastName: "Common/getLoggedInUserLastName"
    })
  }
})
</script>

【讨论】：