Question

我无法理解mapGetters如何与TypeScript一起工作。我正在按照示例here进行操作，但无法根据建议使用它

这是我的代码

getters.ts

export const GET_POSTS = 'GET_POSTS'

posts.module

import {GET_POSTS} from '../types/getters'
...
  get [GET_POSTS]() {
    return this.posts || [];
  }

PostsList.vue

@Component({
  components: { PostListItem },
  computed: mapGetters(["GET_POSTS"]) // what local prop does this map to or how do I access it?
})
export default class PostsList extends Vue {
  name = "PostsList";
  posts = [];

  /**
   * Get posts
   */
  async mounted() {
   console.log(this.GET_POSTS); // ERROR: Property 'GET_POSTS' does not exist on type 'PostsList'.
  }

基本上，我正在尝试：

...mapGetters({
   posts: GET_POSTS
})

console.log(this.posts)

Answer 1

所提及的问题suggests the solution。由于Vue类组件无法推断成员的类型，因此应声明映射的Vuex项：

应该是：

GET_POSTS!: () => PostInterface[];
posts: PostInterface[] = [];

该断言要求开发人员负责提供的类型。如果mapGetters(["GET_POSTS"])丢失或不符合预期的提供类型，将导致运行时错误。

Vue类组件预计将被弃用。 Composition API为TypeScript提供了更好的支持。

Vuex-TypeScript mapGetters

1 个答案: