Cette formation en ligne vous permettra de maîtriser Vuex afin de pouvoir gérer l'état de vos applications Vue (édition et mise en ligne du cours durant mai 2019).
Après une introduction qui vous permettra de comprendre les piliers de Vuex - la librairie de state management dédiée aux applications Vue -, deux projets vous permettront de mettre en oeuvre concrètement les concepts abordés.
Au programme de cette formation Devenir opérationnel rapidement en Vue et Vuex
Le premier projet vous permettra de créer une application de brainstorming avec drag & drop :
- dispatcher vos premières actions
- effectuer les "commits" de vos premières mutations
- de créer un state centralisé et d'y accéder depuis vos components Vue
- implémenter le drag & drop
Le deuxième projet vous permettra de créer un site de commerce et son module d'administration. C'est l'occasion idéale de créer une application proche de ce que vous serez amené à réaliser sur le terrain :
- requêter une API REST depuis le store
- créer un service permettant de faire du CRUD et de le consommer depuis une action
- apprendre à créer un log afin de persister les erreurs de votre application afin de pouvoir les consulter après coup
- créer des fonctionnalités évoluées (caddie, log d'erreurs persistées dans le store ...)
- utiliser Bootstrap 4 et Flexbox conjointement
Comme toujours, les codes sources sont fournis sur github.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions !
Table des matières de cette formation Vue-JS (durée : 5h02m)
-
Introduction
- Principes de Vuex et création du projet gratuit 00:05:57
- Simple compteur sans Vuex gratuit 00:07:20
- Gérer l'état de notre compteur avec Vuex 00:11:25
- Résumé des fondamentaux de Vuex 00:01:27
-
Projet 1 - vuex-ideas (application de brainstorming avec drag & drop)
- Création de nos components 00:08:09
- Création et gestion d'un formulaire 00:07:39
- Ajouter une feuille de style globale 00:01:20
- Effectuer le commit d'une mutation en lui passant un paylaod 00:07:14
- Getter qui transforme un objet en tableau 00:08:28
- Créer un nouvel objet à l'issue de chaque mutation 00:03:36
- Dispatch d'une action qui elle-même commit une mutation 00:03:29
- Utilisation du spread operator pour cloner un objet 00:01:20
- Rendre les idées draggables 00:08:27
- Création d'un component "Idea" 00:05:12
- Persister le nouvel ordre 00:13:53
- Drag & drop entre deux colonnes 00:10:48
- Drag & drop entre trois colonnes 00:13:15
-
Projet 2 - vuex-commerce (site de e-commerce et son backend)
- Création du nouveau projet 00:07:09
- Création de la view "admin" 00:09:39
- Création du service "productService" 00:11:57
- Afficher les produits 00:03:03
- Utilisation de Vuex pour récupérer et stocker nos produits dans le store 00:10:50
- Création de la page d'ajout de nouveau produit 00:10:03
- Gérer la soumission du formulaire de création de produit 00:15:43
- Logguer les erreurs dans le store 00:06:29
- Meilleure convention de nommage 00:01:24
- Afficher les produits sur la page d'accueil 00:09:50
- Ajouter un caddie au menu 00:03:48
- Ajouter un produit au caddie 00:11:23
- Afficher le contenu du caddie 00:10:16
- Ajouter au caddie ou bien mettre à jour la quantité 00:14:01
- Ajouter au caddie ou bien mettre à jour la quantité (suite) 00:15:51
- Créer le getter getNumberArticlesInCart 00:11:17
- Utilisation de notre nouveau getter 00:02:44
- Ajouter une icone de caddie "font awesome" 00:04:16
- Création d'une méthode qui supprime un article du caddie 00:06:39
- Ajout d'une action et d'une mutation pour la quantité 00:10:38
- Disptacher les actions d'incrément et de décrément de quantités 00:06:29
- Fichiers sourcestélécharger
- Certificat
Aucune expérience Vuex n'est en revanche requise.