使用vuex时如何在打字稿语法中使用mapState函数？

Question

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

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

如果您阅读vuex文档，您将知道使用这种方法是重复性的，因此在大型应用程序中使用mapState感到无聊而不是非常容易且有用。所以我想在Typescript组件中使用mapState，但我不知道真正的方法。我尝试了以下使用mapState函数的方法，这是错误的，没有用：

     get mapState({
         counter:count
      })
or
  get mapState(['name', 'age', 'job'])

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

Answer 1

您可以在Component批注中调用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
}

Answer 2

更容易使用 JS Spread 语法：

<template>
  <div class="hello">
    <h2>{{ custom }}</h2>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { mapState } from 'vuex';

@Component({
  computed: {
    ...mapState({
      title: 'stuff'
    }),
    // other stuff
  },
})
export default class HelloWorld extends Vue {

  title!: string;

  public get custom():string {
    return this.title;
  }
}
</script>

您的店铺：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    stuff: 'some title',
  },
  mutations: {

  },
  actions: {

  },
});