Ce livre de la collection vBook se compose d'un livre de référence sur Vue.js pour développer des applications web modernes en JavaScript avec un framework progressif et d’un approfondissement sous forme de vidéo qui présente le développement avec Vue.js d’un jeu de rapidité et d’adresse.

Livre Vue.js - Développement d'applications web modernes en JavaScript

Alliant théorie et pratique avec ses nombreux exemples, ce livre sur Vue.js, framework JavaScript facile à prendre en main, s’adresse à tout développeur Front End désireux de développer des applications web fluides, dynamiques et réactives. Bien que des connaissances sur les langages HTML, CSS et JavaScript soient un plus pour appréhender la lecture de ce livre, un chapitre dédié à JavaScript permettra au lecteur d’être à jour des nouvelles syntaxes apparues ces dernières années.

Après une introduction sur le concept de DOM virtuel et d’architecture MVVM dont Vue.js s’inspire, le lecteur passe rapidement à la pratique avec l’installation et la configuration des outils d’aide au développement. Il apprend à utiliser Vue.js sur un nouveau projet ou sur un projet existant et devient ainsi en mesure de manipuler le DOM d’une page web, de mettre en place les comportements attendus suite aux actions de l’utilisateur ou encore de gérer des styles CSS à l’aide des directives introduites par le framework. Un chapitre est également dédié à la création de formulaires dynamiques.

Dans la suite du livre, l’auteur détaille la manière d’organiser son code en composants et d’architecturer une application en fonction de sa taille, en ayant notamment recours à la mutualisation du code. Le lecteur apprend également à utiliser l’empaqueteur de modules Webpack pour compiler et déployer une application en production.

Ayant pris soin de rappeler les concepts de sécurité liés aux applications web (CORS, cookies, jetons JWT, attaques CSRF et XSS, protocole OAuth 2.0), l’auteur explique ensuite comment consommer des API dans une application de manière sécurisée, d’abord sous la forme d’une API REST puis sous la forme d’une API GraphQL.

Pour finir, le lecteur appréhende le routage avec Vue Router pour simuler les URLs de l’application dans un navigateur, ainsi que la centralisation de la gestion des données avec le plug-in Vuex.

Vidéo Réalisation d'un jeu de rapidité et d'adresse avec Vue.js

Cette vidéo s'adresse aux développeurs qui souhaitent concevoir un jeu de rapidité et d'adresse avec le framework JavaScript progressif Vue.js.

Vous commencerez par créer une première instance de type Vue avant d’utiliser Vue.js pour interagir avec le DOM. Vous manipulerez ainsi différentes propriétés, méthodes, attributs ou directives pour initialiser la grille du jeu, modifier l'affichage des cases, compter le nombre d'essais restants ou encore afficher un message de félicitations. Puis, l'utilisation de propriétés calculées, d'écouteurs et de styles dynamiques vous permettra de tester toute la réactivité de Vue.js.

Pour finir, vous apprendrez à structurer une page en composants et verrez comment faire communiquer entre eux un composant parent avec un composant enfant.

Téléchargements

• Des fichiers complémentaires EIVUEJS (12 114 Ko)

Introduction

1. 1. Quelles notions ce livre couvre-t-il ?
2. 2. Prérequis
3. 3. Historique de Vue.js
   1. 3.1 Pourquoi Vue.js ?
      1. 3.1.1 Ses origines
      2. 3.1.2 Ses atouts
   2. 3.2 Qu'est-ce que le Virtual DOM ?
      1. 3.2.1 Définition
      2. 3.2.2 API DOM pour mettre à jour une page web
      3. 3.2.3 Limites de l'API DOM
      4. 3.2.4 Apparition du concept de DOM virtuel
      5. 3.2.5 Manipulation du DOM virtuel
   3. 3.3 Le DOM virtuel avec Vue.js
4. 4. Modèles d'architectures
   1. 4.1 MVC (Modèle - Vue - Contrôleur)
      1. 4.1.1 MVC pour toutes applications
      2. 4.1.2 MVC adapté aux applications web
   2. 4.2 MVVM (Model - View - ViewModel)
5. 5. Comparatifs avec les autres frameworks
   1. 5.1 Popularité entre Vue, React et Angular
   2. 5.2 Avantages et inconvénients
      1. 5.2.1 Angular
      2. 5.2.2 React.js
      3. 5.2.3 Vue.js
      4. 5.2.4 Quel framework pour quel besoin ?
      5. 5.2.5 Aller plus loin dans la comparaison avec les autres frameworks
6. 6. Futur de Vue.js

Notions essentielles de JavaScript

1. 1. Introduction
2. 2. Bases algorithmiques
   1. 2.1 Variables et types de valeurs
      1. 2.1.1 Déclaration d'une variable
      2. 2.1.2 Types de valeurs
      3. 2.1.3 Contextes d'exécution global et local
      4. 2.1.4 Portée de variable
      5. 2.1.5 Conversion de types de données
      6. 2.1.6 Affectation par décomposition
   2. 2.2 Structures de contrôle
      1. 2.2.1 Instructions conditionnelles
      2. 2.2.2 Boucles
3. 3. Fonctions
   1. 3.1 Définition et utilisation des fonctions
   2. 3.2 Fermetures (closures)
   3. 3.3 Fonction en argument d'autres fonctions
   4. 3.4 Paramètres par défaut et paramètres du reste
   5. 3.5 Fonctions fléchées
   6. 3.6 Fonctions anonymes autoexécutantes
4. 4. Manipulation de tableaux
   1. 4.1 Déclarer, lire, modifier, supprimer des éléments
   2. 4.2 Itérer sur un tableau
   3. 4.3 Décomposer avec l'opérateur spread
   4. 4.4 Filtrer un tableau
   5. 4.5 Trier un tableau
5. 5. Manipulation d’objets
   1. 5.1 Définir un objet et son prototype
   2. 5.2 Instancier un objet
   3. 5.3 Lire, ajouter, modifier ou supprimer une propriété
   4. 5.4 Copier ou fusionner des objets
   5. 5.5 Itérer sur un objet
   6. 5.6 Chaîner les méthodes d'objet
6. 6. Utilisation du mot-clé this
   1. 6.1 En dehors d'une fonction
   2. 6.2 Dans une fonction appelée de manière classique
   3. 6.3 Dans une fonction appelée via call() et apply()
   4. 6.4 Avec bind() pour associer un objet à this
   5. 6.5 Dans une fonction appelée en tant que méthode d'objet
   6. 6.6 Dans un gestionnaire d'évènement
   7. 6.7 Dans une fonction fléchée
7. 7. Gestion des exceptions
   1. 7.1 L’utilité
   2. 7.2 La structure try...catch...finally
   3. 7.3 L'objet Error et les erreurs personnalisées
8. 8. Utilisation des promesses
   1. 8.1 Objet natif Promise
   2. 8.2 Méthode then()
   3. 8.3 Gestionnaires de then()
   4. 8.4 Méthode catch()
   5. 8.5 Chaînage de traitements asynchrones avec les promesses
   6. 8.6 Création de promesses déjà tenues ou rompues
   7. 8.7 Exécution de tâches asynchrones en parallèle
   8. 8.8 Gestion de la pile d'appels
   9. 8.9 Fonctions asynchrones avec async
9. 9. Utilisation des modules JavaScript
   1. 9.1 L'historique des modules JavaScript
      1. 9.1.1 Introduction
      2. 9.1.2 Application sans module
      3. 9.1.3 Objets en tant que modules et fonctions auto-invoquées
      4. 9.1.4 Modules CommonJS
      5. 9.1.5 Modules AMD
      6. 9.1.6 Chargeur de modules
      7. 9.1.7 Empaqueteur de modules
   2. 9.2 Les modules ES 6
      1. 9.2.1 Introduction
      2. 9.2.2 Déclarer et utiliser un module
      3. 9.2.3 Éviter les conflits de nommage
      4. 9.2.4 Agréger plusieurs modules
      5. 9.2.5 Importer dynamiquement

Comprendre les fondamentaux de Vue.js

1. 1. Installation
   1. 1.1 Une version par environnement
   2. 1.2 Via téléchargement manuel
   3. 1.3 Via l'inclusion d'un CDN (le plus simple)
   4. 1.4 Via npm ou yarn pour de plus gros projets
      1. 1.4.1 Téléchargement du package vue
      2. 1.4.2 Explication des différents builds
   5. 1.5 Via Vue-CLI
2. 2. Outils de développements
   1. 2.1 VS Code et ses plugins
      1. 2.1.1 Installer et configurer VS Code
      2. 2.1.2 Déboguer avec VS Code
   2. 2.2 Vue Devtools
   3. 2.3 Vue Performance Devtool
   4. 2.4 CodeSandbox
   5. 2.5 Git
3. 3. Instance Vue.js
   1. 3.1 Hello World
   2. 3.2 Liaison de données entre View et ViewModel
   3. 3.3 Cycle de vie d'une instance
   4. 3.4 Utilisation du mot-clé this
4. 4. Virtual DOM et réactivité
   1. 4.1 Le système de liaison de données
   2. 4.2 Le fonctionnement de la file d'attente de mise à jour asynchrone
   3. 4.3 La déclaration de propriétés réactives
   4. 4.4 Les limitations de la détection de changement
   5. 4.5 Les directives pour manipuler le DOM
      1. 4.5.1 Un attribut HTML spécial
      2. 4.5.2 Les arguments et les arguments dynamiques
      3. 4.5.3 Les modificateurs
5. 5. Liaison de données
   1. 5.1 Liaison réactive uni-directionnelle
      1. 5.1.1 Afficher des données réactives avec l'interpolation texte
      2. 5.1.2 Rendre un attribut réactif avec v-bind
   2. 5.2 Liaison bidirectionnelle avec v-model
6. 6. Affichage des données dans la View
   1. 6.1 L'interpolation avec des données plus complexes
   2. 6.2 La directive v-html
   3. 6.3 La directive v-once
   4. 6.4 Le rendu conditionnel
      1. 6.4.1 La directive v-show
      2. 6.4.2 Les directives v-if, v-else-if et v-else
   5. 6.5 La balise <template>
7. 7. Traitement et formatage des données
   1. 7.1 Valeurs traitées avec les propriétés calculées
   2. 7.2 Valeurs traitées avec les méthodes
   3. 7.3 Propriétés calculées vs méthodes
   4. 7.4 Mutateurs calculés
   5. 7.5 Valeurs traitées avec les observateurs watch
   6. 7.6 Utilisation des filtres pour formater les données
8. 8. Affichage de listes de données
   1. 8.1 Utiliser la directive v-for
   2. 8.2 Filtrer les éléments d'une liste
      1. 8.2.1 Ne pas utiliser v-if avec v-for
      2. 8.2.2 En utilisant une propriété calculée
   3. 8.3 Trier les éléments d'une liste
   4. 8.4 Muter un tableau ou un objet
9. 9. Capture des évènements déclenchés par l'utilisateur
   1. 9.1 Directive v-on
      1. 9.1.1 Mettre à jour une donnée suite à un évènement du DOM
      2. 9.1.2 Récupérer l'évènement dans la méthode
   2. 9.2 Modificateurs d'évènements
   3. 9.3 Évènement dynamique et syntaxe objet
10. 10. Gestion des styles CSS
    1. 10.1 Scoped styles
    2. 10.2 Les styles dynamiques
    3. 10.3 Les styles dynamiques avec un objet
    4. 10.4 Les styles dynamiques avec un objet sans CSS

Utiliser les formulaires

1. 1. Les éléments de formulaire
   1. 1.1 L’utilisation de librairies tierces
   2. 1.2 Les champs text et textarea
   3. 1.3 Les cases à cocher et les boutons radio
   4. 1.4 Les listes déroulantes
2. 2. Les champs particuliers de formulaire
   1. 2.1 Champs date
   2. 2.2 Champs de chargement de fichier
   3. 2.3 Sliders
3. 3. Les modificateurs de la directive v-model
   1. 3.1 Formater une saisie en tant que nombre
   2. 3.2 Réagir sur l'évènement change plutôt qu'input
   3. 3.3 Retirer les espaces
4. 4. La validation du formulaire
   1. 4.1 Les librairies de validations de formulaire
   2. 4.2 Utiliser VeeValidate
      1. 4.2.1 Installer
      2. 4.2.2 Utiliser les règles de validation par défaut
      3. 4.2.3 Ajouter ses propres règles de validation
      4. 4.2.4 Gérer la soumission du formulaire
   3. 4.3 Utiliser Vuelidate
      1. 4.3.1 Installer
      2. 4.3.2 Utiliser les règles de validation par défaut
      3. 4.3.3 Ajouter ses propres règles de validation
      4. 4.3.4 Gérer la soumission de formulaire

Utiliser les composants

1. 1. Qu'est-ce qu'un composant ?
   1. 1.1 Définition
   2. 1.2 Structure d'un composant
   3. 1.3 Structuration d'une application en composants
2. 2. Création d'un composant
   1. 2.1 Manière globale
   2. 2.2 Manière locale
3. 3. Communication entre composants
   1. 3.1 Parent - enfant
      1. 3.1.1 Définition des props dans la Vue
      2. 3.1.2 Types de données
      3. 3.1.3 Définition des props dans le ViewModel
      4. 3.1.4 Validation des props
      5. 3.1.5 Utilisation des props dans le ViewModel
   2. 3.2 Enfant - parent
      1. 3.2.1 Émettre un évènement depuis un composant enfant
      2. 3.2.2 Écouter un évènement dans le composant parent
   3. 3.3 Enfant - Enfant
      1. 3.3.1 Limite de l'utilisation des props et des évènements personnalisés
      2. 3.3.2 Utilisation d'un bus d'évènements
4. 4. Pour aller plus loin
   1. 4.1 Les différentes propriétés d'instance d'un composant
   2. 4.2 L’utilisation de la directive v-model sur un composant
      1. 4.2.1 V-model pour un composant contenant un champ texte
      2. 4.2.2 V-model pour un composant contenant une case à cocher ou un bouton radio
   3. 4.3 L'héritage des attributs du composant
   4. 4.4 Les évènements natifs à relier au composant
   5. 4.5 La liaison bidirectionnelle d'une prop avec le modificateur .sync
5. 5. Plusieurs types de composants
   1. 5.1 Les composants dynamiques
      1. 5.1.1 L'élément <component> et l'attribut is
      2. 5.1.2 L'élément <keep-alive>
   2. 5.2 Les composants monofichiers
   3. 5.3 Les composants basiques
   4. 5.4 Les composants asynchrones pour améliorer les performances
   5. 5.5 L’utilisation de la fonction render() pour le rendu
   6. 5.6 Les composants fonctionnels

Mutualiser des fonctionnalités

1. 1. Utiliser les slots pour injecter du contenu
   1. 1.1 Définition
   2. 1.2 Slots nommés
   3. 1.3 Props de slot
2. 2. Utiliser les composants sans rendu
   1. 2.1 Définition
   2. 2.2 Création d'un composant de captures d'erreurs
3. 3. Utiliser les mixins
   1. 3.1 Définition
   2. 3.2 Stratégies de fusion des options
4. 4. Utiliser les plugins
   1. 4.1 Définition
   2. 4.2 Optimisation des performances
      1. 4.2.1 Vérifier la taille des plugins et leur vitesse de chargement
      2. 4.2.2 Utiliser le tree-shaking pour les plugins qui le permettent
5. 5. Les directives personnalisées
   1. 5.1 Définition
   2. 5.2 Arguments et modificateurs

Créer et déployer une application avec Vue CLI

1. 1. Plusieurs types d'applications
   1. 1.1 Une SPA classique
      1. 1.1.1 Définition
      2. 1.1.2 Contraintes d'une SPA classique
   2. 1.2 Une application universelle (SPA + SSR)
      1. 1.2.1 Définition
      2. 1.2.2 Contraintes d'une application universelle
   3. 1.3 Un générateur de site statique
      1. 1.3.1 Définition
      2. 1.3.2 Architecture JAMstack
      3. 1.3.3 Contraintes des sites statiques
   4. 1.4 Une PWA
      1. 1.4.1 Définition
      2. 1.4.2 Différents types de caches
      3. 1.4.3 Contraintes d'une PWA
   5. 1.5 Quel type d'application pour quel besoin ?
2. 2. Création d’un projet avec Vue CLI
   1. 2.1 Présentation
   2. 2.2 Installation
      1. 2.2.1 Prérequis
      2. 2.2.2 Prototypage rapide d’une application
      3. 2.2.3 Création d’une application Vue.js complète
   3. 2.3 Comprendre l'arborescence du projet
      1. 2.3.1 Racine du projet
      2. 2.3.2 Dossier src
      3. 2.3.3 Modification de l'arborescence pour un projet de taille moyenne
      4. 2.3.4 Modification de l'arborescence pour un gros projet
3. 3. Fonctionnalités de Vue CLI
   1. 3.1 Les plugins et les presets
      1. 3.1.1 Les plugins
      2. 3.1.2 Les presets
   2. 3.2 Le rechargement à chaud
   3. 3.3 La configuration de Webpack
      1. 3.3.1 Comprendre le fonctionnement
      2. 3.3.2 Accéder aux fichiers de configurations des différents modes
      3. 3.3.3 Modifier la configuration
      4. 3.3.4 Utiliser l'API de chaînage pour modifier plus finement la configuration
   4. 3.4 Les modes et variables d'environnement
      1. 3.4.1 Les modes pour chaque environnement
      2. 3.4.2 Les variables d'environnement
   5. 3.5 Le dossier public
      1. 3.5.1 Interpolation dans les fichiers HTML
      2. 3.5.2 Fichiers statiques
   6. 3.6 La compatibilité des navigateurs
      1. 3.6.1 La liste des navigateurs compatibles
      2. 3.6.2 Le mode moderne
      3. 3.6.3 Les contrôles CORS en mode moderne pour les modules ES6
4. 4. Déploiement de votre application en production
   1. 4.1 Procédure de déploiement
      1. 4.1.1 Compiler votre application avec Webpack
      2. 4.1.2 Prévisualiser en local
      3. 4.1.3 Déployer votre application sur un serveur
   2. 4.2 Déploiement simple avec des plateformes PaaS
      1. 4.2.1 Déployer sur Netlify
      2. 4.2.2 Déployer sur Heroku
      3. 4.2.3 Créer une image Docker avec Nginx

Consommer des API REST et GraphQL

1. 1. Plusieurs types d'API (REST et GraphQL)
   1. 1.1 Définition et historique
   2. 1.2 API REST
      1. 1.2.1 Définition
      2. 1.2.2 Contraintes d'une API REST
   3. 1.3 API GraphQL
      1. 1.3.1 Définition
      2. 1.3.2 Description du fonctionnement
2. 2. Sécurité et modes d'authentification
   1. 2.1 Principes à adopter
   2. 2.2 Cookie d'authentification
      1. 2.2.1 Cookie de session
      2. 2.2.2 Attaques CSRF (Cross Site Request Forgery)
      3. 2.2.3 Attaques XSS (Cross Site Scripting)
   3. 2.3 Authentification basique (Basic)
   4. 2.4 Authentification avec jeton porteur (Bearer)
   5. 2.5 Authentification avec jeton signé (Bearer + JWT)
      1. 2.5.1 Signature
      2. 2.5.2 Principe clé privée - clé publique
      3. 2.5.3 Composition d'un jeton JWT
   6. 2.6 Authentification avec une clé API
      1. 2.6.1 Authentification de l'application par le fournisseur d'API
      2. 2.6.2 Problématique de sécurité sur le réseau de l'utilisateur
      3. 2.6.3 Où conserver les clés API ?
   7. 2.7 Authentification avec OAuth 2.0
      1. 2.7.1 Un serveur d'authentification
      2. 2.7.2 La problématique de conservation du jeton
3. 3. Créer une API rapidement avec Strapi
   1. 3.1 Créer le backend de votre API
      1. 3.1.1 Présentation
      2. 3.1.2 Installation
   2. 3.2 Créer le schéma de base de données
      1. 3.2.1 Présentation du tableau de bord
      2. 3.2.2 Créer le schéma de base de données
      3. 3.2.3 Gérer les rôles et les permissions
   3. 3.3 Tester l'API REST
      1. 3.3.1 Tester les requêtes GET, POST, PUT et DELETE
      2. 3.3.2 Utiliser des paramètres pour filtrer une collection
   4. 3.4 Tester l'API GraphQL
      1. 3.4.1 Utiliser Postman ou l'éditeur GraphQL de Strapi
      2. 3.4.2 Récupérer des données
      3. 3.4.3 Créer un enregistrement
      4. 3.4.4 Modifier un enregistrement
      5. 3.4.5 Supprimer un enregistrement
      6. 3.4.6 Utiliser des filtres
      7. 3.4.7 Fonctions d'agrégation et clause groupBy
4. 4. Fetch et Axios pour consommer des API REST
   1. 4.1 Fetch
      1. 4.1.1 Définition et usage
      2. 4.1.2 Les objets Request et Response
      3. 4.1.3 Gérer les erreurs
      4. 4.1.4 Interrompre une requête
      5. 4.1.5 Limiter les appels trop fréquents avec debounce et throttle
      6. 4.1.6 Exécuter des requêtes en parallèle
   2. 4.2 Création d'un catalogue de produits
      1. 4.2.1 Afficher la liste des produits avec fetch
      2. 4.2.2 Gérer les erreurs avec un composant sans rendu
      3. 4.2.3 Mutualiser la fonctionnalité d'appel API
      4. 4.2.4 Mettre en place une pagination
      5. 4.2.5 Ajouter un menu déroulant pour filtrer la liste par catégorie
      6. 4.2.6 Utiliser une barre de recherche
   3. 4.3 Axios
      1. 4.3.1 Définition et usage
      2. 4.3.2 L'objet config et l'objet response
      3. 4.3.3 Gérer les erreurs
      4. 4.3.4 Interrompre une requête
      5. 4.3.5 Utiliser les intercepteurs
      6. 4.3.6 Centraliser la configuration axios dans l'application
5. 5. Apollo pour consommer des API GraphQL
   1. 5.1 Installation
      1. 5.1.1 Installation avec Vue CLI
      2. 5.1.2 Installation manuelle pour consommer une API Strapi
      3. 5.1.3 Installation du plugin VS Code
   2. 5.2 Récupérer des données
      1. 5.2.1 Les requêtes intelligentes
      2. 5.2.2 Utiliser des paramètres dans la requête
      3. 5.2.3 Requête conditionnelle
      4. 5.2.4 Modifier les données reçues
      5. 5.2.5 Intercepter les erreurs
      6. 5.2.6 Les options supplémentaires
   3. 5.3 Placer le code des requêtes dans des fichiers .gql
      1. 5.3.1 Créer un fichier .gql
      2. 5.3.2 Importer un fichier .gql
      3. 5.3.3 Utiliser les fragments
   4. 5.4 Créer, modifier ou supprimer une ressource
      1. 5.4.1 La méthode this.$apollo.mutate
      2. 5.4.2 Le composant ApolloMutation
   5. 5.5 Mise à jour du catalogue de produits avec Apollo
      1. 5.5.1 Nettoyer l'ancienne logique métier de l'API REST
      2. 5.5.2 Définir les requêtes GraphQL
      3. 5.5.3 Définition des requêtes intelligentes

Utiliser Vue Router pour la navigation

1. 1. Définition et installation
   1. 1.1 Définition
   2. 1.2 Installation
      1. 1.2.1 Télécharger le plugin ou utiliser un CDN
      2. 1.2.2 Utiliser npm
      3. 1.2.3 Utiliser Vue CLI
   3. 1.3 Déclaration du routeur
2. 2. Usage
   1. 2.1 Définition d'une route
   2. 2.2 Résolution d'une route
   3. 2.3 Mode historique
   4. 2.4 Affichage des composants dans des vues routeur
      1. 2.4.1 La vue par défaut
      2. 2.4.2 Les vues nommées
   5. 2.5 Naviguer à l'aide des liens <router-link>
      1. 2.5.1 Fonctionnement
      2. 2.5.2 La classe active
      3. 2.5.3 Les props de <router-link>
      4. 2.5.4 Les routes nommées
   6. 2.6 Routes dynamiques
      1. 2.6.1 Utilisation des segments dynamiques
      2. 2.6.2 Récupérer les segments dynamiques avec $route
      3. 2.6.3 Utiliser les segments dynamiques pour passer des valeurs aux props d'un composant
      4. 2.6.4 Passage entre deux chemins liés à la même route
   7. 2.7 Les routes imbriquées
3. 3. Navigation programmée
   1. 3.1 Navigation programmée avec $router
      1. 3.1.1 $router.push() et $router.replace()
      2. 3.1.2 $router.forward(), $router.back(), $router.go()
   2. 3.2 Les intercepteurs de navigation
      1. 3.2.1 Des intercepteurs globaux, par route ou par composant
      2. 3.2.2 Flux de résolution lors d'un passage d'une route à l'autre
      3. 3.2.3 Déclaration d'un intercepteur
      4. 3.2.4 Exemple d'utilisation d'un intercepteur global
      5. 3.2.5 Exemple de chargement de données avant la navigation
   3. 3.3 Les redirections
4. 4. Pour aller plus loin
   1. 4.1 Les transitions
      1. 4.1.1 Le composant <transition>
      2. 4.1.2 Exemple d'une transition entrante et sortante en fondu
   2. 4.2 Optimisation des performances
      1. 4.2.1 Utilisation du lazy-loading avec les composants asynchrones
      2. 4.2.2 Utiliser le préchargement avec la méthode webpackPrefetch

Utiliser Vuex pour la gestion d'états

1. 1. Partager un état global entre plusieurs composants
   1. 1.1 Problématique
      1. 1.1.1 Le flux de donnée unidirectionnel
      2. 1.1.2 Utiliser les props et les évènements pour partager et accéder à l'état global
      3. 1.1.3 Utiliser un bus d'évènement pour réagir aux actions
   2. 1.2 Utilisation d'un store pour centraliser les données
      1. 1.2.1 Déporter les états dans un objet partagé
      2. 1.2.2 Tracer les mutations
      3. 1.2.3 Utiliser Vuex
2. 2. Installer et utiliser le store Vuex
   1. 2.1 Installation
      1. 2.1.1 Avec un CDN
      2. 2.1.2 Avec npm ou yarn
      3. 2.1.3 Avec Vue CLI
   2. 2.2 État
      1. 2.2.1 Définir et accéder à une donnée de l'état
      2. 2.2.2 Utiliser mapState() pour générer les propriétés calculées
   3. 2.3 Accesseurs
      1. 2.3.1 Accéder à une donnée d'état via un accesseur
      2. 2.3.2 Utiliser mapGetters() pour générer les propriétés calculées
   4. 2.4 Mutateurs
      1. 2.4.1 Muter une donnée de l'état du store
      2. 2.4.2 Muter plusieurs données avec une mutation
      3. 2.4.3 Muter un objet ou un tableau
      4. 2.4.4 Utiliser un fichier de constantes pour lister les types de mutations
      5. 2.4.5 Utiliser mapMutations() pour générer les propriétés calculées
      6. 2.4.6 Les mutations avec la directive v-model
   5. 2.5 Actions
      1. 2.5.1 Utiliser les actions pour des traitements asynchrones
      2. 2.5.2 Utiliser mapActions pour générer les méthodes
      3. 2.5.3 Chaîner des actions asynchrones
3. 3. Utiliser les modules pour organiser son store
   1. 3.1 Séparer le store en plusieurs fichiers
   2. 3.2 Utiliser les modules Vuex

1. Conclusion
3. Index