Dans une application Vue, il est inévitable que vous rencontriez le problème suivant : différents composants doivent utiliser la même variable.
Pour que cela fonctionne, vous devez souvent passer la même variable entre beaucoup de composants. Des variables sont transmises d’un composant à l’autre tout au long de l’arborescence, ce qui fait de votre code un désordre illisible.
Si vous continuez assez longtemps, vous atteindrez un certain point où la gestion de l’état devient très complexe.
Vuex est une bibliothèque de gestion d’état pour les applications Vue.js. Au centre de chaque application Vuex se trouve un « store », qui est essentiellement un objet contenant l’état de l’application.
Pour utiliser Vuex dans notre application Vue, nous devons d’abord l’installer : npm install vuex – save.
Exemple : Nous avons une To do list que l’on souhaite pouvoir afficher sur plusieurs pages. Grâce à Vuex nous pourrons partager à toute l’application la liste des tâches.
Le store que nous allons créer aura son propre dossier. Commençons donc par créer un dossier «store» dans le dossier « src ».
Dans le dossier « store », nous allons créer un fichier appelé « index.js ». Ce fichier contient la définition de notre store.
On importe Vue et Vuex. La méthode use de Vue est celle qui est utilisée pour utiliser un plugin. On crée une nouvelle instance de Vuex avec new. Ensuite le module exporte ses données. On a donc le squelette de notre module de gestion des données.
Maintenant si on ouvre le fichier main.js (c’est le fichier de configuration de l’application) :
On voit qu’on importe store et qu’on le déclare globalement. Il sera ainsi disponible dans toute l’application.
Comme le store est présent dans toute l’application nous pouvons accéder à l’état de notre application dans tous les composants.
La seule façon de changer réellement d’état dans un store consiste à émettre une mutation.
Les mutations Vuex ressemblent beaucoup aux événements : chaque mutation a un nom et une fonction. La fonction est l’endroit où nous effectuons les modifications d’état réelles, et il recevra l’état actuel comme premier argument. Une règle importante à retenir c’est que les mutation doivent être synchrones.
Ajoutons deux méthodes dans le store, une pour créer une tâche et la seconde pour marquer la tâche finie.
Puis ajoutons-les dans notre composant Todo.
Pour que la liste des todos soit réactive, il faut récupérer la liste des tâches dans une méthode réactive : la méthode « computed ».
On peut accéder directement au state car il est partager à toute l’application dans le fichier main.js.
Lorsqu’un composant doit utiliser plusieurs propriétés d’état du magasin ou des getters, la déclaration de toutes ces propriétés calculées peut être répétitive. Pour résoudre ce problème, nous pouvons utiliser le spreed operator avec la méthode mapState helper qui génère pour nous les fonctions situé dans notre fichier index.js.
Pour gérer les opérations asynchrones nous devons utiliser les actions :
Les Actions
Les actions sont similaires aux mutations, les différences étant que :
Imaginons que les données proviennent d’une API, nous avons besoin d’attendre que le serveur nous envoie une réponse avant de modifié le state.
Une action peut simplement appeler une mutation du state ou effectuer une action asynchrone puis émettre une demande de mutation du state. On fait les appels ajax au serveur dans les actions avant de muter l’état de notre application.
Pour faire des requêtes aux serveurs, j’ai utilisé le plugin axios. Pour l’installer il suffit de faire npm install axios –save.
Avec les mutations correspondantes :
Utilisons nos actions dans le composant :
Nous importons les actions dans le composant puis nous utilisons les nouvelles fonctions dans notre template.
Maintenant nous pouvons utilisé la To do list à plusieurs endroit dans notre application, les données serons toujours synchronisées.
Vous venez de découvrir comment partager des variables sur l’ensemble d’une application.