Aperçu des sections

  • Présentation

    Nécessite d'avoir vue le cours vueJS approfondissement

    • Vue CLI

      Vue-cli est un outils en ligne de commande qui vous permet différentes choses telles que :

      • créer un projet facilement selon préférences pré-enregistrées (presets) (dossier pour les vues, les composants, les assets, plugins, dépendances, etc...)
      • servir vos sources en mode dev pour travailler en local lors du développement de votre projet (serveur de dev)
      • builder vos sources en mode prod pour fournir un dossier compilé du projet (serveur de prod)
      • et bien d'autres choses...


      Bref, vue-cli vous permettra de gérer toutes les tâches nécessaires aux différentes phases de votre projet, cela peut-être :

      • packager des modules JS pour les rendre compatibles avec les navigateurs
      • compiler du Typescript en JS
      • compiler du SCSS en CSS
      • Linter votre code
      • etc, etc...


      Donc, même si l'utilisation de Vue en mode CDN peux s'avérer utile et légère pour des petits projets, vue-cli sera indispensable pour bâtir une application complète basée sur Vue.



      Installation de vue CLI

      => nécessite node 8.9 minimum (node -v pour vérifier)

      Pour commencer, il faut installer vue-cli en global (afin d'avoir accès aux nouvelles commandes Vue "depuis partout"). Lancez un terminal, puis exécutez cette commande :

      npm install -g @vue/cli  (=> attention sudo pour les utilisateurs de Linux)


      Pour vérifier que tout s'est bien passé, vous pouvez vérifier la version de vue-cli installée en rentrant cette commande :

      vue --version  (le raccourci -v ne fonctionne pas)

      Ce qui devrez vous afficher quelque chose comme ceci :

      @vue/cli 4.2.3  (4.2.3 en mars 2020)

      Voici le lien vers la doc officielle si vous rencontrez des problèmes lors de l'installation de vue-cli : https://cli.vuejs.org/guide/installation.html


      Créer un nouveau projet

      Pour démarrer un nouveau projet à partir de zéro, il vous suffit d'exécuter la commande :

      vue create nomDuProjet

      Puis de vous laissez guider pour les différents réglages. Vue propose de nombreuses options disponibles lors de la création d'un nouveau projet, nous verrons ça plus tard, les réglages par défaut suffiront pour le moment.


      Créer un nouveau projet avec vue-cli


      Par la suite, vous pourrez enregistrer votre profil de configuration (presets) pour pouvoir créer de nouveaux projets sur la base d'un template personnalisé, et donc de gagner du temps. Doc officielle (EN) : https://cli.vuejs.org/config/#pages

      Une fois que votre nouveau projet est initialisé, vous devriez obtenir une arborescence comme ceci :



      Voila, la structure de base de votre projet est créé, allons voir un peu comment le modifier.


      L'utilisation de Vue-CLI permet de faire des composants mono-fichiers, qui sont beaucoup plus adaptés à la création d'application entièrement gérées par Vue :

      https://fr.vuejs.org/v2/guide/single-file-components.html

      Vous pouvez aussi opter pour cette architecture si vous souhaitez conserver des fichiers n'utilisant qu'un seul langage (template + CSS + JS dans trois fichiers distincts) :

      <!-- my-component.vue -->
      <template>
        <div>This will be pre-compiled</div>
      </template>
      <script src="./my-component.js"></script>
      <style src="./my-component.css"></style>



      Lancer un serveur de dev

      Pour lancer un serveur de dev, il suffit d'utiliser la commande vue serve dans le dossier src (la ou se trouve la fichier App.vue). Cette commande nécessite l’installation d'un package supplémentaire :

      npm install -g @vue/cli-service-global   (attention sudo)

      puis :

      vue serve

      Voici ce que cela devrai vous renvoyer dans le terminal :



      Rendez-vous à l'adresse http://localhost:8080 de votre navigateur pour constater la bonne exécution de votre serveur de dev, et de votre projet. Voici ce que vous devriez y trouver :



      Cette page est la page par défaut du template de projet qui vous montre que tout fonctionne bien (le "It works" d'Apache...). Tout ceci est bien évidemment configurable selon vos besoins ou contraintes (changement de port, vitualHost, etc...).

      Note : comme vous le propose vue serve, vous pouvez même accéder aux projets de vos voisins de réseaux en utilisant l'adresse IP de la machine d'un de vos collègue au lieu de localhost. Sympa.


      Commencer à modifier son code

      La commande vue serve va automatiquement recompiler votre projet lorsque vous allez enregistrer des modifications dans vos fichiers. Il vous indiquera par la même occasion les différentes erreurs qui pourraient survenir lors de la compilation. Modifier les fichiers HelloWorld.vue et App.vue pour arriver à ce résultat :


      Note : dans chaque fichier .vue, on retrouvera les éléments importants de chaque composant (template, "objet vue", etc...). On pourra aussi retrouver des éléments en plus (des balises <style> par exemple). Profitez en pour regarder comment sont "architecturés" les différents fichiers, et comment sont importés les composant les uns dans les autres.

      Le fichier main.js est votre point d'entrée, celui qui comporte votre composant Root (instance de Vue, ou vue modèle).


      Compiler son projet pour la production

      Maintenant que nous avons un projet "personnalisé", il va falloir compiler l'intégralité des sources de l'application afin d'obtenir un code JS compatible avec les navigateurs, minifié, packagé et uglifié. Pour ce faire il vous suffit d'utiliser la commande "build". 

      Depuis la racine de votre projet, exécuter la commande suivante :

      vue build src/main.js

      Ceci aura pour effet de compiler votre code source (présent dans le dossier src), dans un nouveau répertoire "dist". Regarder l'intérieur du dossier dist, vous trouverez l'équivalent compilé de votre projet en cours :



      Vous pouvez désormais lancer le projet directement en ouvrant votre fichier "index.html" dans votre navigateur. Attention : cela nécessite d'avoir un VirtualHost correctement configuré afin de ne pas casser tous les liens appelant vos assets.

      Voici un exemple avec le VirtualHost "tdcli.local" :


      Vous pouvez désormais déployer votre application via son code compilé, présent dans le dossier dist.

      • Vue UI

        Maintenant que vous avez découvert l'outils en ligne de commande permettant de gérer le développement de vos projets, voici un outils bien pratique qui fait à peu près les même choses, mais via une interface graphique web. Vous allez pouvoir :

        • créer des projets
        • enregistrer des presets
        • lancer les taches serve build etc....
        • bénéficier d'outils de vérification de config
        • gérer les dépendances
        • et bien d'autres choses...


        et tout ça, à la souris ! N'est il pas merveilleux !



        Pour avoir cette interface, il vous suffit de lancer la commande vue ui. Vous pourrez créer de nouveaux projets, ou bien importer des projets existants, puis les configurer, lancer les taches de build ou de serve, etc...

        Je vous laisse découvrir l'outils qui est assez simple à prendre en main.


        • Mixins

          Les mixins sont des sortes de composants "utilitaires" dans votre application. Elles permettent de stocker des fonctionnalités qui peuvent être utiles à plusieurs composants a priori totalement indépendant les des autres, et surtout d'éviter d'écrire du code redondant. 

          Par exemple, vous pouvez regrouper toutes vos méthodes de formatage de texte (diverses et variées : dates, devises, formatage de liens, etc...) dans une mixins dédiées à cet usage. Par la suite, vous appellerez votre mixins un peu partout ou vous en aurez besoin. Cette méthode permet donc de créer des composants génériques, sans pour autant surcharger le composant Root avec de la logique métier.


          Créer des fichiers mixins

          Voici un exemple de deux fichiers mixins, spécialisés dans le formatage de données, et les appels de fetch en mode GET ou POST :


          Cet exemple contient donc deux mixins, séparées dans deux fichiers distincts. Chacune des mixins comporte deux méthodes. Les mixins étant des sortes de composants, vous pouvez leur donner des méthodes, mais aussi des propriétés, et toutes les possibilités prévues pour les composants Vue (filtre, hooks lifecycle, etc...).


          Utiliser vos mixins dans vos composants

          Il vous suffira par la suite d'importer vos fichiers à l'intérieur des composants qui en ont besoin en utilisant cette syntaxe :

          import maMixin from '../mixins/LeNomDeMonFichier'

          De les enregistrer dans votre composant :

          mixins: [maMixin]


          A ce moment la, tous les éléments présents dans votre mixins (méthodes, propriétés, etc...), vont littéralement être fusionnés avec le composant qui l'appelle. Vous pourrez donc vous en servir à l'intérieur de manière transparente.


          Utilisation à l'intérieur du composant, via le mot clé this :

          this.maMethodeDeMixin()

          Utilisation directement dans le template :

          maMethodeDeMixin(...)


          Pour plus d'exemples et d'informations : https://fr.vuejs.org/v2/guide/mixins.html

          • Plugins

            Installation des plugins

            Pour installer un plugin dans Vue, vous avez deux choix :

            • soit via un CDN, si il existe
            • soit en l'installant en local


            L’installation en local se fait via npm, par exemple :

            npm install nom-du-plugin

            Puis, vous devrai l'importer dans votre application de cette manière (au bon emplacement, se référer aux docs) :

            import NomPlugin from 'nom-du-plugin'
            
            Vue.use(NomPlugin)


            Vue.use() permet "d'installer" le plugin dans votre application. Il permet de suivre la procédure d'utilisation d'un plugin définit par Vue, et aussi de lui envoyer certains paramètres de configuration dans certains cas : 

            Vue.use(NomPlugin, {option1:true, option2:false})

            Suivant les plugins, il n'est pas toujours nécessaire d'utiliser Vue.use(), il vous faudra vous référer à la documentation de chaque plugins pour voir les différentes possibilités d'utilisation (installation en global/local, utilisation comme mixin, etc...) 

            Documentation officielle sur les plugins VueJS + info sur la création de votre propre plugin : https://fr.vuejs.org/v2/guide/plugins.html


            Utiliser un plugin

            VueJS regorge de nombreux plugins permettant de gagner en productivité sur des problématiques récurrentes. Voici le dépôt Github officiel awesome-vue qui référence un grand nombre de plugins pour Vue : https://github.com/vuejs/awesome-vue

            Exemples de plugins :



            Datepicker et Vodal

            • Vue Router

              Installation

              Le router officiel de Vue (vue-router) n'est pas inclut dans le noyau de Vue. Il vous faudra donc l'installer, au besoin. 

              Vous pouvez récupérer le code via un CDN :

              https://unpkg.com/vue-router@3.1.6/dist/vue-router.js

              Puis l'inclure dans votre HTML :

              <script src="/path/to/vue-router.js"></script>

              Ou bien l'installer via NPM :

              npm install vue-router
              Puis l'importer dans votre application :

              import VueRouter from 'vue-router'
              
              Vue.use(VueRouter)

              Vue UI :

              Dans notre cas de figure, le mieux reste de l'installer lors de la création de votre projet dans vue UI. Il vous suffira simplement de le définir comme dépendance lors de la config de votre installation. La mise en place du router se fera alors de manière automatique.



              Il y a de nombreuses manières d'installer le routeur, je vous laisse choisir la votre. Mais pour ce cours, on laissera vue ui se charger de tout ça car il respecte bien les bonnes pratiques.

              Donc avec vue ui, lorsque votre projet est initialisé, vous obtiendrez une arborescence incluant le routeur, et le code de base dans votre main.js, et dans votre router/index.js afin que le router soit prêt à l'emploi :


              Note : vous pouvez choisir d'installer d'autre routeurs que vue-routeur. On restera sur celui-ci pour le cours.



              Le fichier des routes (router/index.js)

              Ce fichier vous permet de décrire toutes les routes dont votre application va avoir besoin. Attention, on parle bien de route "front-end", ces routes ne correspondent pas forcément aux routes proposées par une API. 

              Par défaut, un site ou une application contient en général différentes pages. Sauf qu'avec un framework front-end, le DOM est généralement régénéré quand on veux changer les données affichées, et comme vous avez pu le constater dans les exercices précédents, cela ne veux pas forcément dire "changer de page" (on régénère le DOM, mais sur la même page). Sauf que dans certains cas, on préfère tout de même avoir différentes routes internes, qui correspondent à peu près au lien <a href=""> classique.

              Ici, chaque route configurées dans le routeur va correspondre à une vue (au sens MVC du terme). Les vues sont des sortes de composants spécialisés. Ils peuvent être "autonomes", ou bien avoir besoin d'autres composants. Et lorsque l'utilisateur va demander la route /login par exemple, Vue va charger la vue Login, et tout les composants nécessaires à son bon fonctionnement.

              Le composant générera alors le HTML via le template et la logique interne, et bingo vous aurez votre page /login.


              Il y a de nombreuses options de configuration possibles, par exemple vous pouvez décider du mode d'écriture des routes :

              • via une méthode basée sur les hashtag (ancre nommée, exemple : #login)
              • via une méthode basée sur l'historique du navigateur (avec des chemins classiques, exemple : /login)

              C'est la propriété "mode" du routeur qui permet de changer cela, à vous de choisir.



              Création des routes

              Pour définir des routes, c'est assez simple. Vous allez pouvoir renseigner vos routes sous la forme d'un tableau d'objets ou chaque objet représente une route. Vous passerez alors l'ensemble de votre tableau de routes à l'objet Router lors de l'initialisation. 


              Voici un exemple avec une route /accueil :

              const routes = [{  //Définition des routes
                  path: '/accueil', //La route
                  name: 'Home', //Son petit nom (sera pratique pour la suite)
                  component: () => //Quel composant de vue elle doit charger (ici, chargement seulement à l'exécution)
                    import('../views/Home.vue')
              }]

              const router = new VueRouter({
                routes: routes //On rajoute le tableau routes à la config de notre routeur
              })


              On peux bien sur aussi faire du routage dynamique avec ce type de syntaxe : 

              path: '/article/:id'  //Ici, le routeur répondra à des routes du type http://monsite.fr/article/23



              Utilisation des routes dans les templates

              Maintenant que l'on a défini nos routes, on va pouvoir utiliser deux balises spécifiques au routeur pour les utiliser dans notre rendu HTML. 

              Ce sont les balises :

              • <router-link> : va générer un lien vers la route désirée. Prends un attribut :to afin de spécifier vers quelle route on souhaite pointer
              • <router-view> : affiche le rendu HTML généré par le composant de vue, correspondant à la route sur laquelle on se trouve


              Exemple :



              Voici quelques exemples dans le doc : https://router.vuejs.org/fr/guide/#html



              Utiliser le routeur dans les composants

              Dans certains cas, vous aurez besoin d'accéder à des informations concernant la route, ou bien de gérer le routage de manière programmatique (redirection, etc...). Vous aurez accès alors à deux objets qui vous permettront d’accéder et de modifier les données concernant vos routes :

              • this.$route : permet par exemple de récupérer les paramètres envoyé par la route en cours (ex : this.$route.params.id, si on a un id dans l'URL)
              • this.$routeur : permet de modifier le comportement du routeur (par exemple : changer de route dans un composant => this.$router.push('/nouvelleRoute') )


              Divers

              Il y a évidemment énormément de possibilités avec le routeur de Vue, telles que :

              • faire des routes imbriquées
              • faire des regex sur les paramètres de routes pour vérifier les données envoyées aux routeur (entier, chaîne, regex, etc...)
              • utiliser des hooks liés aux routes (beforeRouteUpdate, etc...)
              • rediriger des routes
              • etc...


              Mais pour le TP qui vous attends, vous n'aurez pas besoin de choses trop complexes. L'essentiel étant de découvrir vue-routeur, et de pratiquer quelques cas de figure concrètement. Je vous renvoi à la doc pour découvrir toutes les possibilités de vue-routeur : https://router.vuejs.org/fr/guide/advanced/transitions.html


              Note : le Vue DevTools comporte un onglet concernant les routes. Je vous encourage à l'utiliser lorsque vous rencontrerez ces problématiques :




              Voici un lien de présentation très simple du routeur dans la doc officielle de Vue : https://fr.vuejs.org/v2/guide/routing.html

              Et voici la doc pour le vue-router en lui même (détaillé) : https://router.vuejs.org/fr/guide/#html

              • VueX

                Présentation de Flux et VueX

                VueX est un plugin officiel de VueJS permettant l'implémentation du design pattern Flux, permettant de résoudre un problème récurrent des framework front-end JS : l'échange de données entre composants non-parent. Pour prendre un exemple, imaginez la messagerie instantanée de Facebook. Lorsque vous avez des nouveaux messages, l'interface du site change à plusieurs endroits :

                • dans le header (avec la petite notif rouge)
                • dans les boîtes de discussions (en bas de la page)
                • et possiblement à d'autres endroits...


                On peux extrapoler cet exemple avec les nouvelles activités d'amis par exemple.

                Donc l'application reçoit un "nouveau message", puis transmet l'information à tous les composants associés à la messagerie, et qui doivent réagir à cette nouvelle information (ouvrir une fenêtre, déclencher un clignotement, émettre un son, etc...). Comme nous avons pu le constater dans la première version du TP FakeFlix, il peux être assez vite compliqué de partager des données entre composants qui ne sont pas parent direct (avec la fonctionnalité de recherche de film par exemple). On va donc mettre en place des contournements limites afin d'y arriver (ex : les this.$root ou this.$parent). Ce qui génère un couplage fort des composants, ce que l'on cherche précisément à éviter.

                Voici une représentation schématique du fonctionnement de ce design pattern (à gauche, sans VueX, à droite, avec) :



                Même si l'on peut se passer de VueX sur des petites applications (exemple : intégration d'un petit module au sein d'un site, démo, etc...), la mise en place de ce schéma sera vite nécessaire sur des applications d’échelle moyenne ou grande. Une citation de l'auteur de Redux (la version React de VueX) défini bien le moment ou vous aurez besoin d'implémenter ce design pattern : « Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin. » (Dan Abramov).

                Une grosse différence entre React et Vue, c'est que VueX propose une version officielle de l’implémentation de Flux, tandis que React laisse la communauté se charger de développer des solutions sans vraiment se prononcer sur "la meilleure". Donc cela confère une certaine stabilité, et performance à Vuex qui est spécialement conçu pour VueJS, contrairement à Redux qui lui est agnostique.

                Voici une représentation simple de l'architecture de ce design pattern :


                Ce design pattern peux être écris from scratch dans votre application comme cela est expliqué sur cette page : https://fr.vuejs.org/v2/guide/state-management.html. Mais je vous conseille de bien maîtriser VueX afin de partager les mêmes standards que les autres développeurs.

                Pour bien comprendre VueX, vous avez besoin de maîtriser 4 concepts importants :

                • les state
                • les getters
                • les mutations
                • les actions


                Le Store

                Le store est un singleton (un design pattern qui veux que l'on instancie un objet qu'une seule fois). C'est un objet qui contient toutes les données partagées de votre application, et les différentes méthodes vous permettant de les modifier (state, accesseurs, etc...). Vous verrez que l'on utilise le mot-clé "store" un peu partout. Cela est juste une convention pour désigner l'ensemble de ces éléments. Pour faire dans la traduction, c'est le "magasin" (store) de vos données.

                Nous allons approfondir ces notions ensemble. Mais avant, voici un exemple très simple de l'utilisation de VueX dans une petite application VueJS : https://jsfiddle.net/n9jmu5v7/1269/


                Installation

                Pour commencer, vous devez installer le plugin vuex. Vous pouvez suivre la procédure de la doc (https://vuex.vuejs.org/fr/installation.html), et installer le plugin manuellement. N'oubliez pas de créer un dossier store dans votre dossier src afin de bien séparer le code gérant le store du reste de l'application.

                Vous pouvez aussi faire l'installation via vueUI, ce qui automatisera :

                • l'installation du plugin
                • la modification de l'arborescence
                • la mise en place du code de base (intégration de vueX dans vote instance de Vue)


                Voici un exemple de fichier store/index.js, que vous devrez importer dans votre main.js via une variable "store" (le todos est n'est pas obligatoire, évidemment) :


                Puis dans le fichier main.js (attention aux règles d'export JS, les images ne sont pas issues de la même application) :



                State

                L'objet state du store est celui qui contient les données de votre application. Il est conçue pour être la "source de vérité unique", et vous ne pouvez pas modifier les données du state sans passer par des mutateurs. Vous pourrez utiliser les valeurs contenues dans cet objet dans vos composants, comme nous le faisons habituellement avec les "data" présentes directement dans chaque composant. Et vous bénéficierez de la même réactivité : si les valeurs du store change, VueJS régénère le template.

                L'objet store est automatiquement passé à votre instance de Vue et tout ses composants. Vous pourrez alors récupérer les données présentent dans le state de cette manière :

                Dans l'instance de Vue :

                store.state.prenom

                Dans les composants :

                this.$store.state.prenom

                Important : la bonne pratique veut que la récupération des données du state à l'intérieur d'un composant se fait via la mise en place de computed data, qui seront automatiquement recalculées lorsque l'état d'une donnée du state change. Mais le state reste accessible depuis partout dans votre composant.

                Exemple :


                Note : comme vous le savez, il y a toujours de nombreuses manières de réaliser la même chose en dev. A vous de juger celle que vous préférez implémenter. La mise en place de solutions complexes, ou de bonnes pratiques, doit être considérée suivant le contexte (taille du projet, expérience du développeur, connaissance des solutions, etc...). Nous essaierons d'en voir le maximum, à vous de choisir pour la suite. Cette note vaut pour la suite, et pour le métier en général.

                Important : vous n’êtes pas obligé de mettre toutes vos data dans le store. Si certains composants ont des données qui leur sont propres, on peux laisser ces données uniquement dans ce composant. A vous de juger selon les besoins de votre application. L'idée générale étant que l'on mettra seulement les données utilisées dans différents composants à l'intérieur du store. Par exemple, dans le TP FakeFlix, la donnée qui contient toutes les données d'UN film n'a pas forcément besoin d'être partagé par tous les autres composants...


                Getters

                Les accesseurs (getters), sont des sortes de computed data de votre store. Si par exemple vous avez un state qui contient un tableau qui contient X éléments, vous pouvez faire un getter qui vous reverra le nombre d'éléments présents dans ce tableau. Les données du state sont lisibles directement depuis l'extérieur du store (via this.$store.state.xxx), mais cela peux s'avérer utile d'avoir des getters qui vous renvoient une valeur calculée en fonction de différents critères.

                Exemple de getters qui renvoient les tâches "done" d'une liste de tâches :



                Puis, on y aura accès depuis les composants de cette manière :

                this.$store.getters.doneTodos

                Note : dans l'image précédente, vous remarquerez que l'on envoie le state en premier paramètre de la fonction. Cela permet de récupérer les données du state à l'intérieur du getter. On peux aussi lui passer l'objet getters en deuxième paramètre si un getter a besoin d'un autre getter :



                Ici, le getter doneTodosCount() se sert du getter doneTodos() pour compter le nombre de tâches "done".

                On peux aussi envoyer un argument a un accesseur (tel qu'un id par exemple), de cette manière :


                On pourra alors récupérer une tâche de notre tableau de tâche de cette manière :

                this.$store.getters.getTodoById(23)

                Attention : l'enjeu étant de ne pas surcharger l'objet getters. Nous verrons plus tard comme modulariser tout ça, mais ne faites pas trop de getters, au risque de surcharger votre code. Ne faites des getters que sur des choses vraiment utiles.


                Mutations

                Les mutations vous permettent de modifier les valeurs de vos state. Ce sont les "setters" de vos données. La logique de base est à peu près la même qu'en POO classique, dans le sens ou vous allez passer le state et une valeur à votre mutation, qui se chargera de modifier la valeur d'un state. C'est le seul moyen de modifier les données de votre state. Et ceci est très important, car vu que le state est considéré comme "l'unique source de vérité", on ne peux pas se permettre d'en modifier le contenu n'importe comment...

                Voici comment créer une mutation dans votre store pour ajouter une tâche à un tableau de tâche :


                Jusqu'ici tout va bien. Il vous suffira d'appeler la méthode create(), et de lui envoyer la nouvelle tâche afin d'ajouter cette tâche à votre tableau de tâches. Sauf qu'il y a une petite subtilité qui est très importante à comprendre. Du fait de la réactivité, le changement d'une donnée dans le store peut impliquer de nombreuses mises à jours dans les composants impactés par ce changement. Il faudra donc utiliser une fonction particulière de VueX pour "acter" un changement dans l'état du store, afin que celui ci soit bien prise en compte par tous les composants. 

                Pour cela, on utilise la méthode "commit", de cette manière :

                this.$store.commit('create', todo) // Ici on engage un changement via la mutation "create", et on lui envoie la tâche à ajouter

                Ce code ne va pas seulement modifier le tableau todos, il va aussi notifier automatiquement tous les composants qui s'en servent.

                Note : vous n'êtes pas obligé d'envoyer une données en paramètre, je vous laisse jeter un œil à la doc pour voir les différents cas de figures (https://vuex.vuejs.org/fr/guide/mutations.html).

                Important : Les mutations sont des opérations synchrones. Cela veut dire que le script est bloqué le temps que les valeurs soient mise à jour. Ce qui peut prendre un certains lorsque vous avez beaucoup de données utilisées dans beaucoup de composants. Il ne faut donc pas utiliser de fonctions asynchrones (de type fetch() ) dans une mutation. Ce qui pourrait être tentant, voir intuitif, mais très contre-performant. Pour cela, nous utiliserons les actions.



                Actions

                Les actions vous seront utiles lorsque vos mutations dépendent de l'exécution d'une fonction asynchrone. Donc typiquement : l'échange de données avec une API. Vous pourrez appeler vos actions à l'intérieur de vos composants, mais le code synchrone continuera à s'exécuter normalement. Une fois votre appel asynchrone terminé, l'action devra alors engager la modification de votre state via l'appel d'un commit sur une mutation, et re-rendre tous les composants concernés. Pratique.

                Voici un exemple d'action qui va récupérer des données sur une API :


                Comme on peux le voir, on passe l'argument context à notre fonction (qui représente le store), puis lorsque la promesse du fetch est résolue, nous engageons la modification de notre state via la mutation setFav. Du coup, l'application n'est pas "bloquée" pendant l'appel asynchrone, et les données sont bien transmises à tous les composants une fois l'actions finie.

                Pour appeler une action dans vos composants, vous devez utiliser la méthode dispatch de VueX, de cette manière :

                this.$store.dispatch('loadFavList')


                Si vous avez besoin d'envoyer des paramètres en plus, il vous suffit de les passer en deuxième argument de votre action.

                Par exemple :


                Puis simplement :

                this.$store.dispatch('setFavMovie', {id: 1234, status: true})
                Dans cet exemple, vous pouvez constater que l'action setFavMovie appel une autre action une fois l'appel asynchrone terminé.

                Il existe, comme toujours, quelques possibilités pour optimiser la syntaxe : https://vuex.vuejs.org/fr/guide/actions.html


                Récapitulatif sur l'ensemble de VueX



                Divers

                Quand vous utiliserez VueX, n'oubliez pas que le Vue DevTools propose une interface riche pour faire du débugage efficace. Allez jeter un œil dans l'onglet Vuex de votre DevTools dès que vous rencontrer un problème, cela vous sera très utile.



                Les fonctions de mapping

                Pour éviter de réécrire des computed data dans chaque composant pour chaque data, on peux utiliser les fonctions de mapping suivante :

                • mapState : pour mapper les state
                • mapGetters : pour mapper les getters
                • mapMutations : pour mapper les mutations
                • mapAction : pour mapper les actions


                Ces fonctions mappent automatiquement des méthodes ou propriétés de votre store à l'intérieur d'un composant. Il vous suffit juste de renseigner quelles données vous intéresse.

                Par exemple :


                Cela vous évite d'écrire du code redondant et inutile, tel que :

                computed:{
                 prenom(){
                   return this.$store.state.prenom;
                 },
                 nom(){
                   return this.$store.state.nom
                 }
                }

                N'oubliez pas d'importer les méthodes de mapping dans vos composants, de cette manière :

                import { mapState, mapActions } from 'vuex'
                Si vous souhaitez mélanger des computed data locales avec des computed data générées par les fonctions de mapping de VueX, il vous faudra utiliser l'opérateur de décomposition (spread : ...mapState()), afin de les faire cohabiter avec les computed déjà existantes dans le composant.


                Les modules

                Lorsque votre application grossie, une bonne pratique est de décomposer votre store en plusieurs fichiers via l'objet module prévu à cet effet : https://vuex.vuejs.org/fr/guide/modules.html



                Documentation officielle FR du plugin : https://vuex.vuejs.org/fr/

                • Autres fonctionnalités

                  Il y a encore pleins de possibilités offertes par Vue que vous pourrez utiliser plus ou moins tôt dans votre apprentissage, en voici quelques unes :


                  Elles vous seront plus ou moins utiles selon les cas, à vous de piocher dedans !

                  Note : quand vous êtes confrontés à un problème ou à une hésitation, ne vous jetez pas tête baissée dans le code avec vos habitudes. Pensez à aller faire un tour sur Internet (doc, stackoverflow, sites spécialisés, etc..) pour voir les différentes solutions qui s'offrent à vous, ou tout du moins les bonnes pratiques à mettre en place. C'est de cette manière que vous découvrirez des solutions adaptées. Et n'ayez donc pas peur de refactorer votre code si nécessaire !

                  • Ressources

                    Documentation officielle (en grande partie en FR) : https://fr.vuejs.org/index.html


                    Liens utiles : 


                    Tutos vidéo et TP :

                    • TP FakeFlix

                      Ce TP va vous permettre de mettre en pratique toutes les notions de Vue abordées jusqu'ici. Il va vous permettre de travailler avec une vraie API REST, ce qui comporte :

                      • l'authentification d'un user
                      • la compréhension des différentes routes
                      • la compréhension de la doc technique
                      • etc...


                      Vous allez travailler avec l'API proposé par le site The Movie Database afin de réaliser une petite appli web autour du thème du cinéma. Ce service vous propose pleins de fonctionnalités différentes concernant les films et le cinéma en général. Commencez donc par créer un compte pour ceux qui n'en n'ont pas déjà, puis parcourez la doc de l'API à cette adresse : https://developers.themoviedb.org/3/getting-started/introduction


                      Vous pourrez trouver ma version en ligne, afin de vous appuyer sur mon modèle pour avancer à votre ryhtme : http://fakeflix.webboy.frServez-vous en comme un fil d'Ariane. Par contre ne cherchez pas à récupérer mon code JS, car tous est uglifié par Webpack lors du build, et ça ne sera pas très formateur pour vous. Voyez-ça comme une maquette.



                      Je vous donne rendez vous dans l'exercice suivant pour toutes les consignes et les spécifications de ce TP !

                      Bon courage.