Maison > Article > interface Web > 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.
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.
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
.
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.
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', ]) } }
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')` }) } }
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')` }) } }
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
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!