Apprenez à utiliser Vuex en créant un site Web d'achat en ligne

Découvrez comment créer un site de commerce électronique utilisant Vue pour gérer les produits de manière dynamique et avec Vuex afin de gérer correctement l'état de votre panier d'achat.

Certaines personnes voient l'utilisation de Vuex une fonction de gestion d'état. bibliothèque, ce qui représente un grand pas en avant par rapport à l’utilisation de Vue seule. Le concept de gestion d’état peut sembler un peu effrayant et, pour être juste, certaines bibliothèques de gestion d’état peuvent être assez difficiles à comprendre (je vous regarde, Flux et Redux!).

Vuex en revanche, rend le processus beaucoup plus facile à gérer et devrait en réalité être un outil utilisé chaque fois que nécessaire.

Quelques hypothèses

Si vous lisez cet article, Il est probable que vous sachiez déjà comment émettre des événements à partir de composants enfants et que vous sachiez mettre à jour un état dans une application Vue normale. Donc, si vous aviez la tâche de construire un panier et si vous vouliez pouvoir y ajouter des articles, vous sauriez le faire.

Sinon, il serait peut-être intéressant de lire cet article qui explique comment émettre dans Vue . Lisez-le, puis n'hésitez pas à revenir ici une fois que vous serez à l'aise avec l'émission d'événements, car il s'agit d'un concept extrêmement important à comprendre!

La configuration

Aujourd'hui, nous allons créer un mini site / application de commerce électronique avec Vue et Vuex. Nous allons utiliser Vue-cli pour échafauder rapidement notre application. Pour ceux qui ne savent pas ce que Vue-cli est, consultez le lien vers la documentation officielle ici . Nous avons opté pour l’option de configuration manuelle dans Vue-cli, ce qui nous permet de choisir Vuex comme complément optionnel. Cela signifie que Vuex sera automatiquement ajouté à notre application par défaut et créera également un fichier store.js . Ce fichier contiendra les données d'état de notre application.

Remarque: L'ajout de Vuex de cette manière n'est pas obligatoire et vous pouvez également choisir d'ajouter Vuex via npm i vuex . . 19659006] Nous allons vous montrer à quoi ressemble notre fichier store.js par défaut: