Devenir opérationnel rapidement en Vue et Vuex

Name: Devenir opérationnel rapidement en Vue et Vuex
Rating: 4.4 (75 reviews)

Gérer l'état de vos applications Vue avec Vuex

Highest Rated

Created byCode Concept formations Mongo Express Angular Node React Vue

Last updated 7/2021

French

What you'll learn

Apprendre à maîtriser Vuex afin de pouvoir gérer l'état de vos applications Vue

Course content

4 sections • 39 lectures • 5h 3m total length

Principes de Vuex et création du projet5:56
Simple compteur sans Vuex7:19
Gérer l'état de notre compteur avec Vuex11:24
Résumé des fondamentaux de Vuex1:27

Création de nos components8:09
Création et gestion d'un formulaire7:38
Ajouter une feuille de style globale1:20
Effectuer le commit d'une mutation en lui passant un paylaod7:14
Dispatch d'une action qui elle-même commit une mutation3:29
Getter qui transforme un objet en tableau8:27
Créer un nouvel objet à l'issue de chaque mutation3:35
Utilisation du spread operator pour cloner un objet1:19
Rendre les idées draggables8:27
Création d'un component "Idea"5:12
Persister le nouvel ordre13:52
Drag & drop entre deux colonnes10:48
Drag & drop entre trois colonnes13:14

Création du nouveau projet7:09
Création de la view "admin"9:38
Création du service "productService"11:56
Afficher les produits3:02
Utilisation de Vuex pour récupérer et stocker nos produits dans le store10:49
Création de la page d'ajout de nouveau produit10:03
Gérer la soumission du formulaire de création de produit15:42
Logguer les erreurs dans le store6:29
Meilleure convention de nommage1:24
Afficher les produits sur la page d'accueil9:50
Ajouter un caddie au menu3:47
Ajouter un produit au caddie11:22
Afficher le contenu du caddie10:16
Ajouter au caddie ou bien mettre à jour la quantité14:01
Ajouter au caddie ou bien mettre à jour la quantité (suite)15:51
Créer le getter getNumberArticlesInCart11:17
Utilisation de notre nouveau getter2:43
Ajouter une icone de caddie "font awesome"4:16
Création d'une méthode qui supprime un article du caddie6:38
Ajout d'une action et d'une mutation pour la quantité10:37
Disptacher les actions d'incrément et de décrément de quantités6:28

Requirements

Connaître les fondamentaux de Vue

Description

Cette formation vous permettra de maîtriser Vuex afin de pouvoir gérer l'état de vos applications Vue.

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.

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.

Who this course is for:

Développeuses et développeurs web en poste, freelances, étudiant(e)s en informatique, autodidactes motivé(e)s

Devenir opérationnel rapidement en Vue et Vuex

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 26min

Projet 1 - vuex-ideas (application de brainstorming avec drag & drop)13 lectures • 1hr 33min

Projet 2 - vuex-commerce (site de e-commerce et son interface d'aministration)21 lectures • 3hr 3min

Bonus1 lecture • 1min

Requirements

Description

Who this course is for: