如何使用TypeScript使用商店订阅？

问题描述

我已经建立了一个简单的Veux商店：

export default new Vuex.Store({
  state: {
    searchList: [],},mutations: {
    createList(state,payload) {
      state.searchList = payload;
    },getters: {
    list(state) {
      return state.searchList;
    },});

在一个函数中，我得到了一个对象数组，并将它们提交到状态：

.then((data) => MovieSearchResults.commit('createList',data));

然后在另一个组件中，我想使用商店中的数据来填充列表：

import MovieSearchResults from '../../../stores/MovieSearchList';

@Component
export default class MovieSearchResultList extends Vue {}
MovieSearchResults.subscribe((mutation) => {
  console.log(mutation.payload.results);
});
</script>

当我更改状态时，我在MovieSearchResultList组件的控制台日志中看到了有效负载，但是该订阅位于类之外，因此我实际上无法使用数据。

我在做什么错了？

解决方法

由于我使用的是TypeScript，由于我无法使用compute，因此答案不是很清楚。但是经过一些digging之后，我发现TypeScript使用getters进行计算。

所以我要做的是添加一个get方法，该方法返回searchList状态：

type Movie = {
  title: string;
  id: number;
}

@Component
export default class MovieSearchResultList extends Vue {
  get searchList(): Movie[] {
    return MovieSearchResults.state.searchList;
  }
}

对于我使用的模板：

<template>
  <ul>
    <li v-for='movie in searchList' :key='movie.id'>
      {{ movie.original_title }}
    </li>
  </ul>
</template>

此列表在状态更改时得到更新。