Introduction a Vuex

Pour réaliser des projets de grande envergure, l'utilisation d'une source unique de référence, communément appelée single source of truth" (SSOT) est courante pour centraliser des données. Vue.js offre une bibliothèque officielle qui fournit un gestionnaire d'état et fournit une bibliothèque permettant son utilisation, qu’on appelle le « Store ». Ce gestionnaire d'état est une collection de données qui sont facilement accessibles à travers tous les composants d'une application Vue.Js de manière sécurisée, car celles-ci sont seulement modifiables par l’utilisation de méthodes spécifiques qu’on appelle migrations.

Certains éléments essentiels pour comprendre Vuex :

State : 

La source unique de référence de l’application Vue sous forme d’objet. C’est dans cet objet que toutes les données de l’application vont être sauvegardées.

Getters : 

Fonction qui sert à retourner la valeur actuelle d’une donnée à travers toute l’application. Elle suit le même principe que « computed », c’est-à-dire garder le résultat de la fonction en cache pour le retourner à chaque appel et se met à jour automatiquement lorsque leurs dépendances changent.

Mutations : 

Fonction qui est le seul moyen de modifier ou de mettre à jour les données dans le Store tout en offrant la possibilité de suivre les changements de ces données.

Actions :

Fonction qui effectue des opérations asynchrones et qui peut encapsuler des mutations pour y effectuer des modifications avant leur appel et les valider en utilisant la méthode « commit ». 

Modules :

Il est aussi possible de séparer le Vuex store en plus petits morceaux où chaque morceau peut avoir son propre state, getters, mutations, actions et sous-modules dans le but de mieux organiser le code d’une application.

Comment installer Vuex dans un projet Vue.Js

Être dans la racine du projet Vue.Js et lancer la commande :

npm install vuex

Ou 

yarn add vuex

Conclusion 

En conclusion, Vuex de Vue.js est une bibliothèque qui permet de centraliser toutes les données d'une application dans ce qu'on appelle « Store » qui suit le concept de "single source of truth" (SSOT). Les éléments qui permettent de gérer l'état d'une application incluent le state, les getters, les mutations, les actions et les modules. Dû au fait qu'il s'agit d'une librairie officielle de Vue.Js, son installation est très simple, car celle-ci nécessite seulement une seule commande. Pour les projets de grande envergure, l'utilisation de Vuex offre une approche efficace pour la gestion de l'état dans les applications Vue.js.

Références

« What is Vuex? », vuex.vuejs, https://vuex.vuejs.org/ (Page consultée le 15 mars)

Tarun Singh , « Managing State With Vuex in Vue.js », semaphoreci, https://semaphoreci.com/blog/vuex  (Page consultée le 15 mars)

Dave Berning , « How To Manage State in a Vue.js Application with Vuex », digitalocean, https://www.digitalocean.com/community/tutorials/how-to-manage-state-in-a-vue-js-application-with-vuex  (Page consultée le 15 mars)

Emad Aldeen Mukhtar , « Why Getters, Mutations, Actions in Vuex Store », medium, https://medium.com/@abuoop123/why-getters-mutations-actions-in-vuex-store-77069710d2d5 (Page consultée le 15 mars)

Atif Zia , « Vuex Modules, Actions, and Advanced State Management Techniques », matifzia.medium, https://matifzia.medium.com/vuex-modules-actions-and-advanced-state-management-techniques-76a57b2e8b28 (Page consultée le 15 mars)