web-dev-qa-db-fra.com

Comment utiliser la fonction mapState dans la syntaxe TypeScript lors de l'utilisation de vuex?

J'utilise la syntaxe TypeScript dans mon projet vuejs intégré à vuex. Je veux utiliser la méthode mapState telle que calculée dans mon fichier .ts mais j'ai une erreur de syntaxe. Actuellement, j'utilise la syntaxe suggérée par les documents pour la fonction calculée, je veux dire:

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

Si vous lisez les documents de vuex, vous saurez que cette méthode est tellement répétitive et si ennuyeuse que d'utiliser mapState est très facile et utile dans les grandes applications. Je veux donc utiliser mapState dans le composant TypeScript et je ne connais pas la vraie façon. J'ai essayé ci-dessous la façon d'utiliser la fonction mapState, elle était incorrecte et n'a pas fonctionné:

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

Je vous serais reconnaissant de m'aider.

typescriptvuejs2vuex
6
hamid hasani

Vous pouvez appeler mapState dans l'annotation Component:

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
}

Vous pouvez également utiliser mapState pour créer de nouveaux calculs basés sur votre état:

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
}
12
Jeremy Frey

Plus facile à utiliser JS syntaxe 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>

Votre magasin:

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

Vue.use(Vuex);

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

  },
  actions: {

  },
});
1
Edgar Quintero