Vue.js 2 par la Pratique
Vue.js 2 par la Pratique
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 !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
Projet 1 - vuex-ideas (application de brainstorming avec drag & drop)
Projet 1 - vuex-ideas (application de brainstorming avec drag & drop)
Chapitre 3
Projet 2 - vuex-commerce (site de e-commerce et son backend)
Projet 2 - vuex-commerce (site de e-commerce et son backend)
Plan détaillé du cours
Chapitre 1 : Introduction
26m09
Leçon 1Principes de Vuex et création du projet
Leçon 2Simple compteur sans Vuex
Leçon 3Gérer l'état de notre compteur avec Vuex
Leçon 4Résumé des fondamentaux de Vuex
Chapitre 2 : Projet 1 - vuex-ideas (application de brainstorming avec drag & drop)
1h32
Leçon 1Création de nos components
Leçon 2Création et gestion d'un formulaire
Leçon 3Ajouter une feuille de style globale
Leçon 4Effectuer le commit d'une mutation en lui passant un paylaod
Leçon 5Getter qui transforme un objet en tableau
Leçon 6Créer un nouvel objet à l'issue de chaque mutation
Leçon 7Dispatch d'une action qui elle-même commit une mutation
Leçon 8Utilisation du spread operator pour cloner un objet
Leçon 9Rendre les idées draggables
Leçon 10Création d'un component "Idea"
Leçon 11Persister le nouvel ordre
Leçon 12Drag & drop entre deux colonnes
Leçon 13Drag & drop entre trois colonnes
Chapitre 3 : Projet 2 - vuex-commerce (site de e-commerce et son backend)
3h03
Leçon 1Création du nouveau projet
Leçon 2Création de la view "admin"
Leçon 3Création du service "productService"
Leçon 4Afficher les produits
Leçon 5Utilisation de Vuex pour récupérer et stocker nos produits dans le store
Leçon 6Création de la page d'ajout de nouveau produit
Leçon 7Gérer la soumission du formulaire de création de produit
Leçon 8Logguer les erreurs dans le store
Leçon 9Meilleure convention de nommage
Leçon 10Afficher les produits sur la page d'accueil
Leçon 11Ajouter un caddie au menu
Leçon 12Ajouter un produit au caddie
Leçon 13Afficher le contenu du caddie
Leçon 14Ajouter au caddie ou bien mettre à jour la quantité
Leçon 15Ajouter au caddie ou bien mettre à jour la quantité (suite)
Leçon 16Créer le getter getNumberArticlesInCart
Leçon 17Utilisation de notre nouveau getter
Leçon 18Ajouter une icone de caddie "font awesome"
Leçon 19Création d'une méthode qui supprime un article du caddie
Leçon 20Ajout d'une action et d'une mutation pour la quantité
Leçon 21Disptacher les actions d'incrément et de décrément de quantités
