How to use mapState function in typescript syntax

问题:

I'm using typescript syntax in my vuejs project that integrated with vuex. I want to use mapState method as computed in my .ts file but I got a syntax error. Currently I am using docs suggested syntax for computed function, I mean:

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

If you read the vuex docs you will know using this way is so repetitive and so boring instead using mapState is very easy and useful in large applications. So I want to use mapState in Typescript component and I don't know the true way. I tried below way to use mapState function it was wrong and didn't work:

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

I'll be grateful if you help me.

回答1:

You may call mapState within the Component annotation:

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
}

You may also use mapState to create new computeds based off of your state:

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
}

回答2:

Easier using JS Spread syntax:

<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>

Your store:

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

Vue.use(Vuex);

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

  },
  actions: {

  },
});