How to use mapState function in typescript syntax when using vuex?

Question

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 see that using Vuex in this way instead of using mapState is very repetitive. Using mapState is very easy and useful in large applications. I want to use mapState in my Typescript component and I don't know the right way. I've tried the way below to use the mapState function and it didn't work.

get mapState({
  counter:count
});

// or

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

I'd be grateful if someone could help me.

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

Answer 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: {

  },
});