Le guide complet de la cartographie dans Vuex

Vuex est une arme à double tranchant. Si elle est utilisée correctement, l'utilisation de Vue peut faciliter votre travail. Cela peut également encombrer votre code si vous n’y faites pas attention.

Avant d'utiliser Vuex, vous devez comprendre quatre concepts principaux : l'état, le getter, la mutation et l'action. Un simple état Vuex manipule les données au sein de ces concepts dans le magasin. Les cartes dans Vuex constituent un excellent moyen d'en récupérer des données.

Dans cet article, je vais montrer comment mapper des données dans le stockage Vuex. Si vous connaissez les bases de Vuex, ce contenu vous aidera à écrire du code plus propre et plus maintenable.

Cet article suppose que vous connaissez les bases de Vue.js et Vuex.

Qu'est-ce que la cartographie dans Vuex ?

Les cartes dans Vuex vous permettent de lier tout type de propriété en état (état, getter, mutation et action) à une propriété calculée dans un composant et d'utiliser directement les données en état.

Voici un exemple simple de magasin Vuex où les données de test sont en état.

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
})

Si vous souhaitez accéder à la valeur de data depuis l'état, vous pouvez effectuer ce qui suit dans un composant Vue.js.

computed: {
        getData(){
          return this.$store.state.data
        }
    }

Le code ci-dessus fonctionne, mais il devient rapidement moche à mesure que la quantité de données d'état commence à augmenter.

Par exemple :

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
        id:1,
        age:23,
        role:user
        data:{
          name:"user name",
          address:"user address"
        }
    },
    services: {},
    medical_requests: {},
    appointments: {},
    }
  }
})

Pour obtenir le nom d'utilisateur d'un objet utilisateur dans l'état :

computed: {
        getUserName(){
          return this.$store.state.user.data.name
        }
    }

Cela fait le travail, mais il existe un meilleur moyen.

Mapper l'état

Pour mapper l'état à une propriété calculée dans un composant Vue.js, vous pouvez exécuter la commande suivante.

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

Vous avez maintenant accès à l'intégralité de l'objet utilisateur dans le composant.

Vous pouvez faire plus, comme ajouter des objets de l'état aux mapState méthodes.

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

Comme vous pouvez le voir, c'est beaucoup plus propre. Le nom d'utilisateur est facilement accessible via :

{{user.data.name}}

services ainsi que de nombreuses autres valeurs d'objets et de cartes.

Avez-vous remarqué comment nous avons transmis le tableau à mapState() ? Si vous devez donner un nom différent à la valeur, vous pouvez transmettre un objet.

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState({
            userDetails:'user',
            userServices:'services'
        })
    }
}

peut désormais référencer userDetails en appelant simplement user.

Quand cartographier l'ensemble de l'état

En règle générale, vous ne devez cartographier que s'il y a beaucoup de données dans l'état et que toutes sont nécessaires dans le composant.

Dans l'exemple ci-dessus, mapper l'intégralité de l'objet utilisateur n'a pas beaucoup de sens si nous n'avons besoin que d'une seule valeur (par exemple username).

Pendant le mappage, l'objet entier sera chargé en mémoire. En fait, nous ne voulons pas continuer à charger des données inutiles en mémoire, car cela serait redondant et affecterait les performances à long terme.

Map getter

La syntaxe du mappage getter est similaire à la fonction mapState.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'firstCount',
      'anotherGetter',
    ])
  }
}

Semblable à l'état de mappage, vous pouvez transmettre l'objet à la fonction mapGetters si vous prévoyez d'utiliser un nom différent.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      first:'firstCount',
      another:'anotherGetter',
    ])
  }
}

Map mutation

Lors du mappage d'une mutation, vous pouvez utiliser la syntaxe suivante pour soumettre une mutation.

this.$store.commit('mutationName`)

Par exemple :

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`

      // `mapMutations` 也支持 payloads:
      'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
    ]),
    ...mapMutations({
      find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
    })
  }
}

Action de carte

L'action de cartographie est très similaire à la mutation de cartographie dans la mesure où elle peut également être effectuée dans une méthode. L'utilisation d'un mappeur liera this.$store.dispatch('actionName') au nom ou à la clé de l'objet dans le tableau du mappeur.

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`

      // `mapActions` 也支持 payloads:
      'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
    })
  }
}

Résumé

En voyant cela, vous devriez être capable d'apprendre :

• Comment fonctionne la cartographie dans Vuex et pourquoi vous devriez l'utiliser Avec une profonde compréhension

• être capable de mapper tous les composants du magasin Vuex (état, getter, mutation, action)

• savoir quand le magasin doit être mappé

Adresse originale en anglais : https://blog.logrocket.com/a-complete-guide-to-mapping-in-vuex/

Auteur : Moses Anumadu

Recommandations associées :

Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

Recommandé Tutoriels vue : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!