typescript - 使用vuex时如何在typescript语法中使用mapState函数？

Question

我在与 vuex 集成的 vuejs 项目中使用 typescript 语法。我想使用 .ts 文件中计算的 mapState 方法，但出现语法错误。目前我正在使用文档建议的计算函数语法，我的意思是:

 get counter() {
   return  this.$store.state.count;
 }

如果您阅读 Vuex 文档，您会发现以这种方式使用 Vuex 而不是使用 mapState 是非常重复的。在大型应用程序中使用 mapState 非常简单且有用。我想在我的 Typescript 组件中使用 mapState 但我不知道正确的方法。我尝试了下面的方法来使用 mapState 函数，但它没有用。

get mapState({
  counter:count
});

// or

get mapState(['name', 'age', 'job'])

如果有人能帮助我，我将不胜感激。

Answer 1

您可以在组件注释中调用 mapState:

import { Component, Vue } from 'vue-property-decorator';
import { mapState } from 'vuex';

@Component({
  // omit the namespace argument ('myModule') if you are not using namespaced modules
  computed: mapState('myModule', [ 
    'count',
  ]),
})
export default class MyComponent extends Vue {
  public count!: number; // is assigned via mapState
}

您还可以使用 mapState 根据您的状态创建新的计算:

import { Component, Vue } from 'vue-property-decorator';
import { mapState } from 'vuex';
import { IMyModuleState } from '@/store/state';

@Component({
  computed: mapState('myModule', {
    // assuming IMyModuleState.items
    countWhereActive: (state: IMyModuleState) => state.items.filter(i => i.active).length,
  }),
})
export default class MyComponent extends Vue {
  public countWhereActive!: number; // is assigned via mapState
}