Vuex, le gestionnaire d'état de Vue.js

• Introduction à Vuex
• Pourquoi devriez-vous utiliser Vuex
• Commençons
• Créer le magasin Vuex
• Un cas d'utilisation pour le magasin
• Présentation des nouveaux composants dont nous avons besoin
• Ajout de ces composants à l'application
• Ajouter l'état au magasin
• Ajouter une mutation
• Ajouter un getter pour référencer une propriété d'état
• Ajout du magasin Vuex à l'application
• Mettre à jour l'état d'une action utilisateur à l'aide de la validation
• Utilisez le getter pour imprimer la valeur de l'état
• Emballer

Introduction à Vuex

Vuex est la bibliothèque officielle de gestion d'état pour Vue.js.

Son travail consiste à partager des données entre les composants de votre application.

Les composants de Vue.js prêts à l'emploi peuvent communiquer en utilisant

• accessoires, pour transmettre l'état aux composants enfants d'un parent
• événements, pour changer l'état d'un composant parent à partir d'un enfant, ou en utilisant le composant racine comme bus d'événements

Parfois, les choses deviennent plus complexes que ne le permettent ces simples options.

Dans ce cas, une bonne option est de centraliser l'état dans un seul magasin. C'est ce que fait Vuex.

Pourquoi devriez-vous utiliser Vuex

Vuex n'est pas la seule option de gestion d'état que vous pouvez utiliser dans Vue (vous pouvez utiliserReduxaussi), mais son principal avantage est qu'il est officiel, et son intégration avec Vue.js est ce qui le fait briller.

Avec React, vous avez du mal à choisir l'une des nombreuses bibliothèques disponibles, car l'écosystème est énorme et n'a pas de norme de facto. Dernièrement, Redux était le choix le plus populaire, MobX ayant suivi en termes de popularité. Avec Vue, j'irais jusqu'à dire que vous n'aurez pas besoin de chercher autre chose que Vuex, en particulier au début.

Vuex a emprunté bon nombre de ses idées à l'écosystème React, car il s'agit du modèle Flux popularisé par Redux.

Si vous connaissez déjà Flux ou Redux, Vuex vous sera très familier. Si vous ne le faites pas, pas de problème - je vais vous expliquer chaque concept de A à Z.

Les composants d'une application Vue peuvent avoir leur propre état. Par exemple, une zone de saisie stockera les données entrées localement. C'est parfaitement bien, et les composants peuvent avoir un état local même lors de l'utilisation de Vuex.

Vous savez que vous avez besoin de quelque chose comme Vuex lorsque vous commencez à faire beaucoup de travail pour transmettre un état.

Dans ce cas, Vuex fournit un référentiel central pour l'état, et vous modifiez l'état en demandant au magasin de le faire.

Chaque composant qui dépend d'un élément particulier de l'état y accédera en utilisant un getter sur le magasin, ce qui garantit qu'il est mis à jour dès que cela change.

L'utilisation de Vuex introduira une certaine complexité dans l'application, car les choses doivent être configurées d'une certaine manière pour fonctionner correctement, mais si cela aide à résoudre le passage d'accessoires non organisés et le système d'événements qui pourraient se transformer en un désordre spaghetti si trop compliqué, alors c'est un bon choix.

Commençons

Dans cet exemple, je pars d'unVue CLIapplication. Vuex peut également être utilisé en le chargeant directement dans une balise de script, mais comme Vuex est plus en phase avec des applications plus volumineuses, il est beaucoup plus probable que vous l'utilisiez sur une application plus structurée, comme celles que vous pouvez démarrer rapidement avec Vuex CLI.

Les exemples que j'utilise seront mis CodeSandbox, qui est un excellent service qui a un échantillon Vue CLI prêt à être utiliséhttps://codesandbox.io/s/vue. Je recommande de l'utiliser pour jouer.

Une fois que vous y êtes, cliquez sur leAjouter une dépendancebouton, entrez «vuex» et cliquez dessus.

Maintenant, Vuex sera répertorié dans les dépendances du projet.

Pour installer Vuex localement, vous pouvez exécuternpm install vuexouyarn add vuexdans le dossier du projet.

Créer le magasin Vuex

Nous sommes maintenant prêts à créer notre boutique Vuex.

Ce fichier peut être placé n'importe où. Il est généralement suggéré de le mettre dans lesrc/store/store.jsfichier, nous allons donc le faire.

Dans ce fichier, nous initialisons Vuex et nous disons à Vue de l'utiliser:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({})

Nous exportons un objet de magasin Vuex, que nous créons à l'aide duVuex.Store()API.

Un cas d'utilisation pour le magasin

Maintenant que nous avons un squelette en place, imaginons un bon cas d'utilisation de Vuex, afin que je puisse présenter ses concepts.

Par exemple, j'ai 2 composants frères, un avec un champ d'entrée et un qui imprime ce contenu de champ d'entrée.

Lorsque le champ de saisie est modifié, je souhaite également modifier le contenu de ce deuxième composant. Très simple mais cela fera le travail pour nous.

Présentation des nouveaux composants dont nous avons besoin

Je supprime le composant HelloWorld et ajoute un composant Form et un composant Display.

<template>
	<div>
		<label for="flavor">Favorite ice cream flavor?</label>
		<input name="flavor">
	</div>
</template>

<template>
	<div>
		<p>You chose ???</p>
	</div>
</template>

Ajout de ces composants à l'application

Nous les ajoutons au code App.vue au lieu du composant HelloWorld:

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>
<script>
import Form from ‘./components/Form’
import Display from ‘./components/Display’
export default {
name: ‘App’,
components: {
Form,
Display
}
}
</script>

Ajouter l'état au magasin

Donc, avec cela en place, nous retournons au fichier store.js et nous ajoutons une propriété au magasin appeléestate, qui est un objet, qui contient leflavorbiens. C'est une chaîne vide au départ.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
flavor: ‘’
}
})

Nous le mettrons à jour lorsque l'utilisateur tapera dans le champ de saisie.

Ajouter une mutation

L'état ne peut être manipulé qu'en utilisantmutations. Nous avons mis en place une mutation qui sera utilisée dans le composant Form pour informer le magasin que l'état doit changer.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
flavor: ‘’
},
mutations: {
change(state, flavor) {
state.flavor = flavor
}
}
})

Ajouter un getter pour référencer une propriété d'état

Avec cet ensemble, nous devons ajouter un moyen de regarder l'état. Nous le faisons en utilisantgetters. Nous avons mis en place un getter pour leflavorbiens:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
flavor: ‘’
},
mutations: {
change(state, flavor) {
state.flavor = flavor
}
},
getters: {
flavor: state => state.flavor
}
})

Remarquez commentgettersest un objet.flavorest une propriété de cet objet, qui accepte l'état comme paramètre et renvoie leflavorpropriété de l'État.

Ajout du magasin Vuex à l'application

Le magasin est maintenant prêt à être utilisé. Nous retournons au code de notre application, et dans le fichier main.js, nous devons importer l'état et le rendre disponible dans notre application Vue.

Nous ajoutons

import { store } from './store/store'

et nous l'ajoutons à l'application Vue:

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

Une fois que nous ajoutons cela, puisqu'il s'agit du composant principal de Vue, lestoreLa variable à l'intérieur de chaque composant Vue pointera vers le magasin Vuex.

Mettre à jour l'état d'une action utilisateur à l'aide de la validation

Mettons à jour l'état lorsque l'utilisateur tape quelque chose.

Nous le faisons en utilisant lestore.commit()API.

Mais d'abord, créons une méthode qui est appelée lorsque le contenu d'entrée change. Nous utilisons@inputplutôt que@changecar ce dernier n'est déclenché que lorsque le focus est éloigné de la zone de saisie, tandis que@inputest appelé à chaque pression de touche.

<template>
  <div>
    <label for="flavor">Favorite ice cream flavor?</label>
    <input @input="changed" name="flavor">
  </div>
</template>
<script>
export default {
methods: {
changed: function(event) {
alert(event.target.value)
}
}
}
</script>

Maintenant que nous avons la valeur de la saveur, nous utilisons l'API Vuex:

<script>
export default {
  methods: {
    changed: function(event) {
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

voir comment nous référençons le magasin en utilisantthis.$store? C'est grâce à l'inclusion de l'objet store dans l'initialisation du composant Vue principal.

Lecommit()méthode accepte un nom de mutation (nous avons utiliséchangedans le magasin Vuex) et une charge utile, qui sera transmise à la mutation comme deuxième paramètre de sa fonction de rappel.

Utilisez le getter pour imprimer la valeur de l'état

Nous devons maintenant référencer le getter de cette valeur dans le modèle d'affichage, en utilisant$store.getters.flavor.thispeut être supprimé car nous sommes dans le modèle, etthisest implicite.

<template>
  <div>
    <p>You chose {{ $store.getters.flavor }}</p>
  </div>
</template>

Emballer

Voilà pour une introduction à Vuex!

Le code source complet et fonctionnel est disponible surhttps://codesandbox.io/s/zq7k7nkzkm

Il manque encore de nombreux concepts dans ce puzzle:

• Actions
• modules
• aides
• plugins

mais vous avez les bases pour aller lire à leur sujet dans la documentation officielle.

Bon codage!

Plus de tutoriels vue:

• Un aperçu de Vue.js
• La CLI Vue.js: apprenez à l'utiliser
• Les DevTools Vue.js
• Configurer VS Code pour le développement Vue
• Créez votre première application avec Vue.js
• Composants de fichier unique Vue.js
• Modèles et interpolations Vue.js
• Directives Vue.js
• Méthodes Vue.js
• Propriétés calculées Vue.js
• Styliser les composants Vue.js à l'aide de CSS
• Observateurs Vue.js
• Méthodes Vue vs observateurs vs propriétés calculées
• Filtres Vue.js
• Composants Vue.js
• Machines à sous Vue.js
• Accessoires de composants Vue.js
• Événements Vue.js
• Communication des composants Vue.js
• Vuex, le gestionnaire d'état de Vue.js
• Vue, utilisez un composant à l'intérieur d'un autre composant
• Vue, comment utiliser un accessoire comme nom de classe
• Comment utiliser SCSS avec les composants de fichier unique Vue.js
• Utilisation de Tailwind avec Vue.js
• Le routeur Vue
• Afficher dynamiquement un composant Vue
• La feuille de triche Vue.js
• Stocker les données Vue sur localStorage à l'aide de Vuex
• Comment appliquer dynamiquement une classe à l'aide de Vue
• Vue, comment utiliser v-model
• Vue, pourquoi les données doivent être une fonction
• Roadmap to become a Vue.js developer in 2020