Vue. js : créer une application pile complète avec Firebase, Vuex et Vue Router

1. Bienvenue dans ce cours !: Bienvenue dans ce cours. C'est génial de t'avoir ici. Je m'appelle Chris. Je suis développeur web et créateur de cours en ligne qui enseigne des milliers d'étudiants à travers le monde. J' ai créé ce cours pour amener tous vos compétences JavaScript au niveau suivant. Ici, dans ce cours, nous allons construire une application de pile complète en utilisant Vue.js, l' un des frameworks frontaux les plus populaires disponibles aujourd'hui. Nous allons construire une application de restaurant de pizza où un utilisateur peut passer des commandes à partir de notre menu de restaurant. En outre, nous aurons l'installation pour que le propriétaire du restaurant se connecte à une section d'administration. Cette section nous permettra d'ajouter ou de supprimer des articles de notre menu, voir toutes les commandes en cours, et aussi de supprimer des commandes une fois terminées. Ce projet utilisera le dernier Cloud Firestore de Firebase pour le back-end de notre application, qui sera utilisé pour stocker tous les éléments de menu ainsi que toutes les commandes. Nous tirerons également parti de Firebase pour l'authentification. cela permettra uniquement aux utilisateurs autorisés d'accéder à notre section d'administration, ainsi qu'à certaines règles de sécurité. Aussi, nous allons garder un magasin Vuex local en synchronisation avec Firebase pour gérer l'état de notre application. Cela nous permettra d'accéder et de gérer facilement toutes les informations dont nous avons besoin en un seul endroit central. Vous en apprendrez également sur le routeur Vue, qui est utilisé pour gérer la navigation entre les pages de notre application. Ici, vous apprendrez de nombreux concepts tels que l'ajout gardes de navigation et la définition du comportement de défilement pour n'en nommer que quelques-uns. Nous passons même à des concepts plus avancés, tels que le chargement paresseux et le fractionnement du code, pour rendre la charge de l'application plus efficace. L' étudiant idéal pour ce cours sera quelqu'un confortable de construire sites Web avec un peu de connaissances JavaScript, l'expérience de Vue.js, ou même un autre framework ou bibliothèque tel que React sera un avantage, bien que je vais essayer de rendre les choses aussi claires que possible pour les nouveaux utilisateurs de Vue.js. Ce cours est idéal pour les étudiants qui cherchent à voir comment tout s'intègre dans une application de téléphone réel. À la fin de ce cours, vous deviendrez des applications complètes de pile en utilisant Vue.js et Firebase. Inscrivez-vous maintenant et j'espère vous voir dans le cours. Faites passer vos compétences Vue au niveau supérieur. 2. Matériel nécessaire pour ce cours: Pour ce cours, il n'y a que quelques choses dont vous aurez besoin, et elles sont toutes libres d'utiliser et de télécharger. Vous avez probablement déjà la plupart d'entre eux. La première est l'accès à un terminal. Si vous utilisez un Mac, vous pouvez utiliser un terminal intégré. Pour y accéder, vous pouvez utiliser la recherche Spotlight en appuyant sur la touche Commande et Espace ensemble. Ensuite, recherchez en tapant dans le terminal. Si vous utilisez Windows, vous pouvez utiliser un programme tel que PowerShell , fourni avec Windows. Vous pouvez le trouver en tapant PowerShell dans la barre de recherche Windows. Ne vous inquiétez pas si vous n'êtes pas familier avec le terminal. Nous n'avons besoin que de quelques commandes et nous les ferons ensemble quand nous en aurons besoin. Vous aurez également besoin d'un bon éditeur de texte web. Pour ce cours, j'utiliserai le code Visual Studio. Cela a également un terminal intégré, ce qui rendra les choses encore plus faciles pour nous. Comme nous allons utiliser un terminal beaucoup pendant le projet. Mais bien sûr, n'hésitez pas à choisir celui que vous préférez. Nous aurons également besoin de Node.js et npm installés aussi. Ceux-ci ont été téléchargés à partir de nodejs.org. J' ai déjà Node.js installé. Si vous ne le faites pas, cliquez sur la dernière version et téléchargez pour votre système d'exploitation particulier. Télécharger Node installe également la dernière version de npm2, qui est un gestionnaire de paquets de nœuds utilisé pour télécharger des paquets JavaScript, que nous utiliserons tout au long de ce cours. Ensuite, l'interface de ligne de commande Vue. Si vous allez sur github.com/vuejs/vue-cli. Vous trouverez plus d'informations sur l'interface de ligne de commande Vue. Vous devrez télécharger Nodes avant de le faire, car Node est une exigence pour l'interface de ligne de commande Vue. La vue CLI ou interface de ligne de commande, est un outil qui nous permet d'échafauder rapidement applications Vue js avec une commande de terminal rapide. Il a divers modèles que nous pouvons utiliser pour créer des applications à partir d'une seule page HTML, juste fruit complexe setups web pack. Nous allons utiliser une version de pack web simple quand un venir à cet épisode. Nous couvrirons bientôt l'installation de la CLI Vue au début de ce projet. Cependant, si vous voulez lire ce guide pour en savoir plus sur les modèles, ou même aller de l'avant et installer. N' hésitez pas à le faire maintenant, sinon, continuez, et nous allons l'installer bientôt. 3. Configuration du projet à l'aide de Vue-CLI: Je vais créer ce projet en utilisant une vue CLI pour créer rapidement notre nouvelle application. Si vous n'avez pas utilisé la ligne de commande de vue avant, C'est un excellent outil pour rapidement échafaudage hors de l' application et se mettre en marche avec le projet de vue vraiment rapide. Il comprend tout ce dont nous avons besoin pour exécuter des applications de vue, y compris à des liens tels que webpack, et nous donne des options pour installer d'autres plug-ins tels que bubble et Linda. Si vous l'avez déjà installé, c'est génial et continuez. Si ce n'est pas le cas, vous devrez exécuter une commande dans le terminal pour configurer cela. Je vais utiliser le terminal intégré avec du code Visual Studio, et bien sûr, vous pouvez utiliser un terminal autonome si vous préférez. Accédez au code Visual Studio. J' ai déjà le terminal ouvert en bas. Si vous ne cliquez pas sur les Options en haut de l'écran, accédez au terminal puis au nouveau terminal. Je vais installer une interface de ligne de commande de vue globalement, donc elle est disponible pour tous les projets et en utilisant npm. La commande qui a besoin est npm i a install dash g flag, donc ceci est installé globalement. Ensuite, le paquet dont vous avez besoin est @ vue /cli a donné cela quelques instants à installer, et puis je vous verrai quand cela est fait. Avec la vue cli maintenant installé, nous pouvons l'utiliser pour créer à nouveau notre nouveau projet à l'intérieur du terminal, je suis actuellement à l'intérieur du répertoire utilisateur racine. Je vais utiliser la commande cd pour changer dans le bureau. C' est là que je vais ajouter le projet. Bien sûr, vous pouvez utiliser n'importe quel endroit de votre choix pour bloquer ce projet. Nous pouvons ensuite initialiser le projet dans un terminal en utilisant la commande vue create. Puis le nom de notre projet, que je vais appeler la pizza - planète. Il est entré pour créer nos projets. Je vais commencer par la bulle par défaut et oui lentille, appuyez sur » entrer ». Cela apprendra à installer les plugins qui est nécessaire, donc une fois de plus, je reviendrai une fois que cela sera fait. cela terminé, vous devriez maintenant avoir le dossier de projet sur le bureau ici. Je vais aller de l'avant et faire glisser cela dans Visual Studio Code, qui détectera automatiquement les nouvelles photos de chemin de fichier et ajoutera cela à l'intérieur du terminal. qui signifie que nous n'avons pas besoin de changer de répertoires dans ce nouveau dossier et une fois de plus, je vais ouvrir le terminal depuis que cela a redémarré, nous dans le dossier Pizza Planet. Tout ce que nous devons faire maintenant est de démarrer notre serveur de développement en utilisant la commande npm, run serve. Commençons ça. Je vais également ouvrir le navigateur où nous pouvons y accéder en utilisant notre hôte local. Nous pouvons voir ici notre hôte local fonctionne sur le port 8080, donc je vais commander ou contrôler cliquer dessus, puis ouvrir cela à l'intérieur du navigateur. C' est la vue par défaut que nous voyons lors de l'utilisation de l'interface de ligne de commande de vue et si vous voyez cette page, tout fonctionne bien. Je vais aller dans le répertoire source où les fichiers vue sont stockés, puis aller dans la vue principale de l'application et juste faire un peu de nettoyage avec ce fichier. Je vais supprimer l'image et les composants HelloWorld. Nous pouvons également supprimer ce composant Helloworld puisque nous allons créer la nôtre et aussi la référence HelloWorld à partir de notre instance de vue. Cette div à l'intérieur de notre modèle est où nous pouvons ajouter n'importe quel contenu que vous voulez apparaître à l'intérieur de notre application. Commençons par ajouter des éléments « p ». Ensuite, à l'intérieur ici, nous pouvons simplement dire bonjour, enregistrer ce fichier et diriger vers le navigateur et tous les changements sont automatiquement mis à jour. Ensuite, je vais ajouter les images à notre dossier assets, donc ceux-ci déjà quand nous en avons besoin. Les images ont été fournies avec ce cours, et je les ai disponibles sur le bureau. Vous pouvez bien sûr utiliser un ensemble différent d'images si vous préférez, ou suivre avec celles exactes que j'utilise. Ouvrons la barre latérale et dirigeons vers nos actifs, qui sont à l'intérieur de la source. Nous pouvons saisir le dossier des images et le faire glisser ici, et toutes nos images sont maintenant disponibles quand nous en avons besoin. Nous avons bien sûr besoin d'un dossier de composants pour et cela est maintenant automatiquement créé des photos lors de l'utilisation de la vue CLI. Pour commencer, je vais ajouter quelques composants qui vont être un seul fichier. Cliquez sur les composants, ajoutez un nouveau fichier, et le premier va être le Home.vue. Le second sera l'en-tête de photo. Vue. Nous pouvons également supprimer l'exemple HelloWorld par la suppression. Comme nous n'avons pas besoin de cela pour notre projet, nous avons ceci en place. Passons à la vidéo suivante, où nous commencerons à ajouter du contenu à ces nouveaux composants. 4. Le composant d'en-tête: Je vais commencer avec les composants d'en-tête que nous avons créés dans la dernière vidéo, qui auront notre logo, titre de notre site, ainsi que quelques liens vers d'autres pages. À l'intérieur de cet en-tête .vue, commençons par créer notre modèle, qui va contenir un élément d'en-tête. En haut de notre en-tête, nous allons avoir un div, qui va être un logo de bulle rappeur, ainsi que le titre de notre site. Nous pouvons ajouter une classe à notre div. Nous pouvons lier cela au CSS en un moment de logo d'en-tête. À l'intérieur, la première chose que je vais faire est d'ajouter notre image et l'image qui est incluse dans les actifs sur le dossier images, va être pour le planet.jpg, donc je vais lier ceci. Ceci provient des actifs../barre oblique, du dossier images et du nom de planet.jpg. Comme l'ancien texte, je vais ajouter une icône de planète pizza, suivie d'un titre de niveau 1, qui va faire un lien vers notre page d'accueil. Nous pouvons ajouter le href comme une barre oblique avant puis le titre de PIZZA PLANET. Juste après notre div environnante avec notre logo, nous pouvons ensuite ajouter nos liens vers différentes zones ou différents composants de notre application. Ajoutons ceux-ci à l'intérieur d'un élément nav. Pour commencer, je vais coder en dur une autre liste jusqu'à ce que nous soyons à l'avant et le routage plus tard dans le cours en utilisant le routeur de vue. La liste non ordonnée, le premier élément de la liste, qui va également être un lien, va lier à une route d'accueil de barre oblique. Nom du lien d'accueil. Chaque lien, je vais ajouter un élément span avec l'icône Tilda pour séparer chacun. Le suivant, je vais copier la plage et aussi l'élément de liste. Collez ceci dans. Ceci est un lien vers nos composants de menu, qui est avant/menu. La prochaine est pour la page de contact. Le href est simplement avance/contact. Le dernier est pour le sujet de ce lien. Ajoutons ceci. Cela n'a pas besoin de la travée. On va bouger ça. Le texte de nous. Le href est tout simplement avant/à propos. La prochaine chose dont nous avons besoin pour notre en-tête est d'ajouter les scripts. La seule chose que nous devons ajouter pour l'instant est le nom de nos composants. Le nom va être l'en-tête de l'application. La prochaine chose que je voulais faire après le modèle et le script est d' ajouter également la section Style où nous pouvons ajouter ces styles pour l'en-tête. Incluez également ces mots-clés étendus, qui signifie que les styles ne s'appliqueront qu' ce qui signifie que les styles ne s'appliqueront qu'à ces composants uniques et non au reste du site. Commençons par sélectionner notre titre de niveau 1, qui est pour le titre du site. Nous pouvons rendre la taille de la police un peu plus grande. Je veux mettre le mien à 1,3 ms. Lorsque nous avons créé notre modèle juste au-dessus, entourez un sous-titre intérieur et aussi notre logo. Nous avons cette div avec la classe du logo d'en-tête. Je vais utiliser cette classe pour ajouter un dégradé linéaire, qui va constituer des bandes en tant qu'image d'arrière-plan. Prenons ça. Juste sous notre H1. Nous pouvons prendre cela comme une classe définissant l'image d'arrière-plan. L' image d'arrière-plan va être un dégradé linéaire. Pour configurer nos bandes à un angle de 45 degrés, séparez-le par une virgule, nous devons également ajouter les étapes dans lesquelles les couleurs vont apparaître. Je vais basculer entre deux couleurs pour créer les effets de rayures. Sur la première couleur, que je vais ajouter est une valeur x de d85226, puis 25 pour cent. Cela signifie essentiellement que le début du dégradé de zéro à 25 pour cent sera constitué de cette couleur. Nous pouvons ensuite ajouter notre deuxième couleur, qui va être la valeur de f79e38. Cette couleur va s'appliquer de 25 pour cent à 50 pour cent. Le deuxième quart du dégradé, pour le troisième trimestre, nous allons revenir à notre couleur d'origine. Ajoutons la même chose. Cela va passer de 50 pour cent à 75 pour cent. Pour le dernier quart du dégradé, nous allons revenir à notre couleur plus claire. Ajoutons ceci. On va l'exécuter à partir de 75 pour cent. Nous pouvons ensuite terminer notre dégradé avec la même couleur. Cela s'exécutera jusqu'à la fin des dégradés, qui est de 100 %. Nous pouvons ensuite spécifier la taille avec la propriété de taille d'arrière-plan, que je vais définir sur une valeur de 80 pixels. Puis 80 pixels. Le type d'affichage va être flex. Donc, dans ce cas, le flex nous permettra d'ajouter la direction flex à être colonne, ce qui permettra à nos articles d'être empilés les uns sur les autres. Nous obtenons le logo du site au-dessus du titre du site. Nous pouvons également ajouter la propriété align items, les définir dans le capteur. Finalement, finissez les choses avec un rembourrage sur le dessus de quelques pixels. Gardez cela loin du haut du navigateur. Mais nous ajoutons d'autres styles. Ajoutons ceci à notre app.vue. Donc, nous pouvons voir cela à l'intérieur du navigateur. N' oubliez pas que tous les fichiers que nous avons créés sont des composants de fichiers uniques autonomes. qui signifie dire à une vue exactement où nous voulons que cela apparaisse à l'intérieur de nos projets. L' app.vue est nos principaux composants et nous pouvons l'utiliser comme un wrapper pour tous nos composants. Pour commencer en haut de nos scripts, nous devons ajouter une importation où nous importons notre en-tête à partir du chemin du fichier des composants slash point et cet en-tête. Nous avons besoin d'une propriété de composants que nous avons déjà à partir du contenu fourni lorsque nous avons créé cela avec la vue CLI. Donc, à l'intérieur ici, nous pouvons ajouter l'en-tête de l'application, qui va être égal à l'en-tête que nous venons d'importer. Donc, lors de l'enregistrement des composants dans une vue, nous ne devrions pas utiliser un nom d'élément réservé tel que l'en-tête. Donc, ce que nous faisons ici est de définir le composant d'en-tête comme un alias d'en-tête d'application. Nous pouvons donc références jusqu'à avait une boucle dans nos modèles où nous voulons que cela apparaisse à l'écran. Donc, nous pouvons déplacer cela et ajouter à l'intérieur de minuscules l'en-tête de l'application avec une ouverture et un éléments de fermeture. Alternativement, nous pouvons utiliser une balise auto-fermante comme ceci. Cela fonctionnera également. J' ai une erreur apparaissant ici, et c'est le chemin du fichier de l'en-tête. Réparons juste ça. C' est censé être PNG. Alors, sauvegardez ça. Maintenant, nous pouvons passer au navigateur. Nous voyons maintenant notre logo apparaître avec les dégradés linéaires de fond. Nous avons également le titre du site et aussi nos liens de navigation juste ici. Juste pour terminer cette vidéo, ajoutons un peu de style au reste de ces liens et nous pouvons également rendre le logo un peu plus petit. Revenons à la tête. vue. Nous pouvons faire défiler jusqu'à nos styles. Commençons par cibler l'image du logo d'en-tête. Donc, il avait un logo, nous pouvons saisir l'élément d'image, puis définir la largeur maximale p valeur de 25 vw, qui est 25 pour cent de la largeur du port de vue. Ensuite, je coiffe pour tous les liens en bas, nous pouvons saisir la liste non ordonnée. Définissez le remplissage sur une valeur de 10 pixels en haut et en bas, zéro à gauche et à droite. Nous pouvons également sélectionner les éléments de la liste et également définir l'affichage pour être inline-block. Sauve ça. Aussi, nous allons enfin ajouter une requête média, qui va rendre cette image un peu plus petite quand nous atteignons 900 pixels et plus. Ajoutons ceci juste après notre article de liste. Chez les médias, nous allons cibler ces écrans qui ont une largeur minimale de 900 pixels. Nous pouvons ensuite cibler notre image de logo d'en-tête, que vous avez juste ici. Nous pouvons ajouter cela à l'intérieur et le déposer à une valeur de 20 vw. Donc maintenant sur un écran plus petit, c'est un corps de 25 pour cent. Nous pouvons augmenter à 900 pixels. Ensuite, nous voyons l'image descend pour la rendre un peu plus petite. C'est ça. Maintenant, pour notre en-tête, nous reviendrons sur ces composants plus tard lorsque nous ajouterons un routage frontal. Mais pour l'instant passons à notre page d'accueil. 5. Composant de la page d'accueil: Il est maintenant temps d'ajouter le contenu au fichier composant de la page d'accueil. Comme nous pouvons le voir ici à partir de cette version finale finie, ajoutera la section Bienvenue, qui est cette section juste ici. Ce lien vers notre Menu lorsque l'utilisateur clique sur le bouton « Let's Order ». Si nous revenons en arrière, juste en dessous de cette section, nous pouvons également avoir trois sections distinctes, savoir la commande, informations de livraison et la section historique. Ces blocs d'information sont en fait des composants distincts et cela nous permettra de les réutiliser ultérieurement. Nous pouvons basculer entre eux, lorsque nous configurons le routeur de vue. Donc, pour l'instant, nous allons laisser ces trois composants, et nous concentrer sur cette section juste ici. Allons à la maison.vue, qui est un composant que nous avons déjà configuré. Nous pouvons commencer par créer dans notre modèle familier, puis imbriqué à l'intérieur ici, je vais ajouter deux divs. Donc, le premier div va être le wrapper. Cela va être le wrapper d'arrière-plan, qui va être le conteneur environnant, où nous pouvons ajouter une image en utilisant CSS, imbriqué ici, nous allons avoir un wrapper de superposition d'arrière-plan, qui va être pour la boîte au centre. Donc, ce premier. Ajoutons la classe de fond c'est pour l'image. Le deuxième div, c'est pour la boîte avec la classe de superposition d'arrière-plan. Donc, à l'intérieur de la superposition d'arrière-plan, nous allons commencer par le titre de niveau 2, qui est le texte de Welcome to Pizza Planet. Après cela, nous ajoutons notre image, qui est l'image du rouleau que nous venons d'avoir ici. Ajoutons l'image à l'intérieur ici, qui est la source de../. Il s'agit du dossier Assets dans les images et le fichier roller.png. Nous pouvons également ajouter les étiquettes alt du rouleau, puis suivi par le titre de niveau trois, qui est le texte de, « Sentant affamé ? » Mais maintenant, nous allons juste ajouter un simple bouton, ce bouton sera branché plus tard lorsque nous ajouterons le routeur vue. Donc, pour l'instant, nous allons juste ajouter un bouton h. Nous pouvons ajouter une classe pour le style de l'order- btn et le texte « Let's order ! » C' est donc tout le contenu de nos modèles. Juste avant de passer à autre chose, nous pouvons également ajouter notre script et à l'intérieur du script tout ce que nous allons faire est d'ajouter un nom pour nos composants à l'intérieur des valeurs par défaut d'exportation avec le texte de la maison. Enregistrez ce fichier. Tout comme nous l'avons fait avec l'en-tête, nous pouvons imbriquer est à l'intérieur du fichier app.vue et enregistrer ce composant Home. Allez à l'app.vue, descendons. Nous pouvons également importer à la maison, à partir de nos composants, qui est./ Composants puis à la maison. Nous devons ensuite enregistrer ceci en ajoutant ceci aux objets composants. Nous pouvons ajouter un composant comme nous l'avons fait ici, où nous l'importons par un nom tel que l'en-tête ou une autre façon de le faire est d'utiliser le nom que nous utilisons lors de l'importation, donc juste à la maison et c'est bien s'il n'y a pas de conflit de noms avec HTML éléments. Tout comme au début quand nous l'avons fait avec l'en-tête, c'est un nom d'élément HTML, donc nous avons dû donner cet alias d'en-tête d'application. Donc maintenant, nous avons ça importé. Nous pouvons aller au sommet, juste en dessous de l'en-tête de l'application, nous pouvons ajouter notre maison à l'intérieur ici. H, sauvegardez ce fichier. Je vais vérifier que cela montre à l'intérieur du navigateur, dit que j'ai un composant maintenant affiché sur la page d'accueil. Nous irons ajouter un peu de style dans un instant. Pour l'instant cependant, je vais supprimer l'espace blanc qui est en haut de l'app.vue, alors faisons défiler vers le bas. Nous pourrions supprimer le style par défaut qui est fourni là où il est dit sur les projets. Cela pousse maintenant l'en-tête vers le haut et nous pouvons maintenant aller tout à la maison.Vue, nous pouvons configurer nos balises de style. Je vais supprimer l'indicateur de portée, puis commencer par nos en-têtes. Nous faisons défiler vers le haut, nous avons un niveau deux et aussi un titre de niveau trois. Commençons par ceux-ci et tapez le h2 et aussi le h3 et ajoutez une marge de deux pour cent. Juste après cela, nous pouvons ensuite cibler l'arrière-plan, qui est le conteneur principal. C' est là que nous allons ajouter l'image de fond, qui va être, et nous allons jeter un oeil à la version finale, cette image, comme nous le voyons ici. Sélectionnez l'arrière-plan. Tout d'abord, nous voulons définir l'image, ce que nous pouvons faire avec la propriété d'arrière-plan, en définissant l'URL, puis en passant dans un chemin de fichier. Le dernier chemin que nous voulons est. /, c'est le dossier Assets Images, puis l'image que vous voulez est dough.jpg, nous pouvons également centrer cela. Ensuite, définissez la taille de l'arrière-plan à couvrir. Si nous sauvegardons cela et passons au navigateur, nous avons maintenant l'image de fond. Je vais régler la hauteur pour être, 30Vh. Ce qui est 30 pour cent du port de vue ou de la hauteur du navigateur. Définissez le type d'affichage pour utiliser la flexbox. Nous pouvons aligner le texte au centre. Ensuite, nous pouvons également aligner notre boîte au centre aussi et nous allons aligner cela verticalement en utilisant les éléments alignés, c'est une propriété flexbox et nous voulons définir la valeur pour être au centre. Maintenant, nous pouvons passer à la superposition d'arrière-plan réelle, qui est le texte ainsi que l'image et le bouton. Juste en dessous de l'arrière-plan. Il s'agit de la superposition d'arrière-plan. Où nous voulons également faire usage du type d'affichage de flex. Nous pouvons définir la direction de flexion pour être colonne, pour stocker ces verticalement. Nous avons également besoin d'un arrière-plan, ce qui est donc plus visible sur l'image d'arrière-plan. Je vais utiliser une valeur de f1e6da. Donc, nous vous pouvez toujours voir l'image de fond. Je vais aussi ajouter la valeur positive de 0,8, pour rendre cela légèrement transparent. On peut voir ça juste ici. On peut contrôler la largeur. Je vais utiliser une valeur de 50 pour cent. Centrez ceci avec la marge zéro auto. Un peu de rembourrage à l'intérieur de cinq pixels. Gardions le texte loin du bord intérieur. Ok, donc tout est centré sur Norrow. Nous devons réduire la taille de cette image de rouleau. Donc, nous allons revenir à l'intérieur de la superposition d'arrière-plan, sélectionner l'image et nous pouvons dire que la largeur maximale pour être une valeur de 15 pour cent. Nous avons juste besoin de repousser ça au centre. Nous pouvons le faire avec la flexbox sauvegarde dans la superposition d'arrière-plan. J' ai mis dans aligner les éléments, d'être au centre. Là, nous allons, et puis finalement nous allons cibler le bouton Ordre et donner à cela une couleur de fond différente et aussi un peu de rembourrage. Donc, juste à la fin de nos feuilles de style. Nous avons donné à ce bouton la classe d'ordre lorsque cet appel notre btn, qui est cette classe juste ici. Alors attrapons ceci, ajoutez-le. Commençons d'abord par la couleur de fond, qui va être f79f38, un rayon de bordure et nous voulons garder ce petit, donc une valeur de trois pixels est fine, certaine marge sur le bas de 10 pixels. Un rembourrage pour rendre la balle un peu plus grande de 10 pixels. Nous pouvons ensuite sélectionner le curseur pour être un pointeur. Alors sauvegardez ceci et dirigez-vous vers les projets. Nous avons maintenant la couleur d'arrière-plan, le rayon de bordure et notre curseur est maintenant en train de changer en pointeur. Donc, c'est maintenant notre configuration de base de la page d'accueil et affiché dans le navigateur. Dans la section suivante, nous allons nous concentrer sur la configuration de notre menu et de notre panier d'achats pour recevoir des données de Firebase. 6. Créer le composant du menu: Lorsque nous avons créé nos composants d'en-tête, nous avons ajouté un lien vers le menu. Ce composant de menu sur lequel nous allons maintenant commencer à travailler, sera finalement l'endroit où nous tirons tous les éléments de menu de notre base de données. Si nous regardons la version finale et nous dirigeons vers le menu, ces éléments seront listés sur le côté gauche, que l'utilisateur pourra sélectionner les pièces qu'il souhaite commander. Ils seront ensuite ajoutés au panier de sur le côté droit, qui peut également augmenter ou diminuer la quantité et ensuite passer la commande. Cette commande sera également envoyée à Firebase et sera également disponible auprès de notre administrateur. Les deux éléments de menu et aussi les commandes seront synchronisés avec un magasin central deux à l'intérieur de notre application, que nous examinerons plus tard. Maintenant, ajoutons les composants menu.vue à l'intérieur de notre dossier de composants. Allons dans la sauce, à l'intérieur des composants. Le menu.vue. La première partie est de créer notre modèle, qui sera juste un tableau HTML pour afficher nos données. Ce tableau sera utilisé pour afficher nos pizzas avec les noms et les options disponibles. Ce sera juste des informations statiques pour l'instant jusqu'à ce que nous travaillions avec Firebase plus tard. Pour commencer, nous ajoutons nos modèles, puis à l'intérieur nous pouvons ajouter un div, qui va avoir la classe de menu sur l'enveloppe du ciel. A l'intérieur de cette div, cela va avoir notre menu et aussi les paniers. Pour l'instant, je vais avoir un commentaire du menu afin que nous puissions voir clairement quelle section il s'agit. Nous pouvons ensuite ajouter un div avec une classe de menu. A l'intérieur d'ici, nous allons avoir un titre de niveau 3, qui sera le texte de pizza authentique faite à la main, nous allons ensuite mettre en place notre table, qui aura quelques exemples de données pour l'instant. Niveau 3, je vais entourer cet intérieur du tilde, si authentique pizza faite à la main. Ensuite, nous pouvons mettre en place notre table juste en dessous. Nous n'allons pas avoir d'en-tête de table, donc je vais juste sauter directement sur le corps de la table. A l'intérieur du corps de la table, nous allons mettre en place des lignes de table libres. Le premier sera pour le titre de la pizza, une deuxième rangée pour la description, puis une troisième rangée qui sera pour les options. À l'intérieur de la première ligne de tableau, nous pouvons ajouter nos données de table. Ensuite, à l'intérieur des données de la table, je vais ajouter ces balises fortes pour rendre cela audacieux, puis un nom de pizza à l'intérieur du tilde. Je vais ajouter du pepperoni, suivi d'un tilde à la fin aussi. C' est notre première rangée. Le second sera pour la description. Ajouter une nouvelle ligne juste en dessous des données de la table et puis ce sera les petites balises pour le rendre un peu plus petit, je vais ajouter un peu Lorem Ipsum. Si vous utilisez Visual Studio Code, vous pouvez taper le mot Lorem, puis appuyer sur Tab, ou vous pouvez ajouter n'importe quel exemple de données que vous voulez, cela n'a vraiment pas d'importance car cela sera extrait de Firebase très bientôt. Après cette ligne de tableau, créons une de plus, qui sera pour nos options. Nos données de table qui commencent par une pizza de 9 pouces. Juste ci-dessous, nous pouvons également ajouter le prix. Je vais ajouter 695 suivi d'un bouton, donc td, et puis à l'intérieur, nous pouvons ajouter notre bouton, qui sera le symbole plus pour ajouter ceci à nos paniers. Le bouton a besoin d'un type de bouton et aussi d'une classe pour le CSS, que nous avons appelé jadis btn underscore vert, un symbole plus droit. Pour le moment, nous n'avons aucun moyen de dire vue que nous voulons ces composants s'affichent lorsque nous cliquons sur les itinéraires du menu barre oblique avant. Comme nous n'avons pas encore de configuration de routeur, titre temporaire, nous pouvons l'ajouter dans le fichier app.view, sorte que nous pouvons voir qu'il est à l'intérieur du navigateur. Commençons par importer ceci, juste en dessous des composants de la maison. Nous voulons notre menu, notre menu d'ici. Nous pouvons également enregistrer cela juste sous la maison, puis ajouter ceci ci-dessus à l'intérieur de notre modèle. Vérifions ça. A l'intérieur du navigateur, donc nous y allons donc nous avons notre titre, nous avons notre titre de pizza, notre description et aussi l'option juste ci-dessous. Cette option sera une boucle, donc plus tard, lorsque nous utiliserons la base de données, nous examinerons les options disponibles et montrerons les différentes tailles et prix. Je vais juste corriger l'erreur d'orthographe à l'intérieur du menu. On y va. Avec cela maintenant en place, nous pouvons maintenant ajouter un peu de style à nos composants de menu. Légère tête sur le menu.vue. Nous pouvons ensuite faire défiler vers le bas. Nous pouvons mettre en place nos tags de style. Je vais laisser ceci comme défini pour ce composant, donc cela ne s'applique qu'à ce fichier unique plutôt que sur le reste du projet. Commençons par notre titre de niveau 3, qui est le titre authentique de pizza faite à la main. Tout ce que nous devons faire ici, c'est de définir le text-align, son être au centre. Suivant ouvert allé à la cible, l'encapsuleur de menu. Rappelez-vous que l'enveloppe de menu va être le conteneur principal. Ça remonterait au sommet. Cela va entourer notre menu et aussi les paniers. Si nous regardons la version finale, cela signifie que si nous faisons défiler cela vers le bas, que le menu et aussi le panier seront empilés verticalement sur un écran plus petit, alors nous ajouterons une requête multimédia, donc ceux-ci apparaissent côte à côte. Allons vers le bas et commençons ça maintenant. Pour ce faire, nous pouvons changer le type d'affichage pour être flexbox, puis sur le plus petit écran, nous pouvons définir la direction de flexion pour être colonne. Nous ajouterons très bientôt une requête multimédia change à la ligne. Permet également de cibler le menu, qui est le côté gauche. Je vais définir la couleur d'arrière-plan pour être une valeur de F1, E6, DA, un rayon de bordure, qui va être de trois pixels. Nous pouvons également en faire la pleine hauteur du navigateur en l'envoyant à 100 vh. Pour le moment, il semble assez petit parce que nous voulons obtenir un élément, mais nous pouvons faire cela voir toute la hauteur du navigateur même sans le contenu. Cela doit être la propriété height pour être 100 vh, une certaine marge de dix pixels, ajouter un peu d'espacement, et aussi un peu de remplissage de dix pixels, l'intérieur du menu. Sauvegardez ceci, faites défiler vers le bas et voici notre menu. Maintenant, nous avons juste besoin d'ajouter une requête média pour en faire une ligne sur les verts plus grands. Toujours dans les balises de style, nous pouvons ajouter la requête média, qui va cibler les écrans d'une largeur minimale de 900 pixels. Alors tout ce que nous voulons faire ici, c'est d'attraper l'enveloppe de menu, que nous avons ici. Ensuite, je change la direction du flux en dessous et ajoute également un peu d'espace entre les deux, sorte que la direction du flex change en ligne. Nous pouvons alors aussi justifier que le contenu soit espacé entre. Cela signifie également que plus tard, lorsque nous aurons aussi nos paniers, nous aurons aussi un peu d'espace entre le menu et le panier. Sur cet écran plus grand, nous devons également définir le menu pour qu'il soit d'une certaine largeur afin qu'il ne couvre pas toute la largeur du navigateur. Nous pouvons le faire en ciblant la classe de menu, puis définir la largeur pour être une valeur de 65 Vw. Je reviens à nos projets. Nous voyons maintenant que nous avons un peu d'espace sur le côté droit pour tous les paniers. Si nous réduisons cela, ce sera maintenant toute la largeur du navigateur. Ensuite, cela et aussi le panier plus tard seront empilés verticalement. Ok, donc cette table semble maintenant comment nous le voulons, mais nous devons configurer les choses pour parcourir un menu avec plusieurs éléments. Nous allons le faire dans la prochaine vidéo où nous allons ajouter un objet pour afficher plus d'éléments dans notre tableau. 7. Boucler les éléments du menu: Toutes nos informations sur les pizzas seront éventuellement stockées dans une vraie base de données. Mais pour l'instant, je vais ajouter quelques éléments de menu dans notre propriété de données pour travailler avec. Je vais le faire à l'intérieur du composant de vue point de menu. Nous devons ajouter une balise de script juste en dessous de notre modèle. Nous pouvons ensuite ajouter notre défaut d'exportation familier où nous pouvons ajouter notre propriété de données pour stocker toutes les pizzas. À l'intérieur de l'instruction return, je vais créer un objet pour les stocker dans les éléments de menu get appelés. Pour l'instant, nous allons juste configurer ceci comme un objet vide. Fourni avec ce cours est un fichier texte appelé objet pizza qui contiendra toutes les données dont nous avons besoin. Avoir cette option disponible sur le bureau. Je vais ouvrir ça. Ensuite, nous pouvons saisir tout le contenu et les coller à l'intérieur de nos données. Sélectionnez tous, copiez ces. Ensuite, collez ceci à l'intérieur des éléments de menu get. Tout ce que nous avons ici, c'est divers objets. Le premier est un objet qui contient une margarita. Nous avons une description et puis à l'intérieur ici, nous avons un tableau d'options. Nous avons nos deux tailles. Nous avons une pizza de neuf pouces et aussi une pizza de 12 pouces avec le prix correspondant. Ensuite, avoir un deuxième élément, qui est un pepperoni, également avec la description et les deux options. Avec cette propriété de données maintenant disponible, nous pouvons faire usage de vues v pour directive. Pour examiner nos données, nous pouvons le faire à l'intérieur de la table où nous avons ajouté toutes les données statiques dans la dernière vidéo. Pour commencer sur les éléments de table environnants, je vais utiliser la directive v for pour regarder à travers. Nous pouvons ajouter v pour. Nous disons ensuite élément dans obtenir les éléments de menu. Obtenir les éléments de menu est l'objet qui est ajouté à notre propriété de données. Nous stockons ensuite chaque pizza individuelle à l'intérieur de cette variable d'article afin que nous puissions accéder est à l'intérieur de notre table. Nous allons commencer par supprimer la valeur codée en dur de pepperoni à l'intérieur des accolades doubles. Nous pouvons ensuite accéder au nom du point de l'élément. Avec tout cela à l'intérieur des petits temps, nous pouvons supprimer le Lorem Ipsum. Nous pouvons en fait doubler les accolades à moins que je ne veuille accéder à la description du point de l'article. Enregistrez cela sur le navigateur et nous pouvons voir si cela fonctionne. Nous voyons que nous avons un petit problème. Lors de l'utilisation de Vue.js et c'est aussi la même chose lorsque vous utilisez React to si vous avez utilisé auparavant. Nous devons ajouter une clé à chaque élément. Nous voyons que la vue attend la directive v bind avec une clé unique. Pour réparer est lors de l'utilisation d'une boucle. Nous pouvons également voir que nous avons le soulignement rouge dans l'éditeur de texte. Nous pouvons également lier une propriété de clé dynamique avec le deux-points, puis la clé. Pour chaque élément individuel, nous devons ajouter cette clé unique. Ceci est tout vue venir mieux, garder une trace de chaque élément lorsque nous ajoutons, supprimer ou mettre à jour une liste des éléments. Pour le moment, notre objet pizza contient des noms de pizza uniques. On peut juste utiliser. On peut dire item.name. Nous pouvons voir instantanément lors de la sauvegarde que sont nos éléments de menu et maintenant ajoutés. Cependant, une meilleure valeur pour une clé serait un ID unique. Lors de l'utilisation ultérieure de notre base un ID unique sera généré pour chaque élément de la base de données. On pourra revenir et changer cette clé plus tard. Mais maintenant nos articles gratuits que vous avez à l'intérieur de nos données. La prochaine chose à faire est de créer une deuxième boucle, qui va parcourir toutes les options. moment, nous avons juste la valeur codée en dur de la pizza de neuf pouces. Si nous passons à notre propriété de données, nous avons deux options. Nous avons les deux valeurs de neuf et 12 pouces ce qui signifie que nous pouvons ajouter une seconde boucle pour passer par ces. Si nous localisons la ligne de la table avec le dimensionnement à l'intérieur des éléments d'ouverture, nous pouvons ajouter une deuxième boucle serait quatre. À l'intérieur, nous allons parcourir nos options individuelles. Rappelez-vous que nous avons nos pizzas individuelles stockées à l'intérieur de cette variable d'article. On peut accéder à l'objet. Options, puis nous pouvons stocker chaque option individuelle dans une variable appelée Option. Nous pouvons alors configurer nos données dynamiques. Au lieu des valeurs codées en dur, nous pouvons demander les accolades doubles. Cela peut être option.size avec le double guillemet juste après pour signaler qu'il est en pouces. Nous pouvons ensuite supprimer le prix, définir les accolades doubles pour être option.price. Une fois que nous avons sauvé cela, nous constatons à nouveau que nous avons un problème avec la directive v bind. Nous devons également ajouter ceci à notre deuxième boucle deux. Ajoutons une clé. Nous devons également ajouter une valeur unique à ces deux éléments. Nous n'avons que deux éléments à l'intérieur de notre tableau d'options. Par conséquent, nous pouvons utiliser le numéro d'index des tableaux comme une clé unique. Nous pouvons saisir cela en ajoutant une deuxième valeur 12 avant boucle. Au lieu d'ajouter simplement la variable d'option, nous pouvons ajouter aux crochets, puis ajouter une deuxième valeur qui est pour notre numéro d'index. Comme il s'agit d'un tableau, ce sera l'option zéro. Puis l'option un et ainsi de suite. Lors du passage de la clé comme option avec le numéro d'index. Enregistrez cela et maintenant à l'intérieur du navigateur, nous voyons nos neuf et 12 pouces options. Bravo si vous pouvez voir les trois éléments à l'écran. Si ce n'est pas le cas, ne vous inquiétez pas juste revenir en arrière. Vérifiez le code et réessayez jusqu'à ce qu'ils arrivent sur la scène. Rejoignez-moi dans la prochaine vidéo où nous allons continuer avec les composants du menu et pousser les pizzas sélectionnées dans les paniers. 8. Pousser les commandes vers un tableau: Dans la dernière vidéo, nous avons ajouté avec succès les éléments de menu à ces itinéraires de menu. Vous pouvez voir à partir de la version finale, si vous allez là-bas et ensuite passer à nos composants de menu, que nous avons encore besoin d'ajouter le panier sur le côté droit de la page. Lorsque l'utilisateur clique sur une « Pizza », cliquez sur le «  Symbole Plus  », l'article apparaîtra à droite dans le panier. Aussi le panier maison brûle pour changer la quantité et le prix total est également mis à jour. Dans cette vidéo, nous allons faire le premier pas vers la création de ceci en ajoutant le tableau de paniers pour stocker les pizzas que l'utilisateur ajoute aux paniers. Si vous n'y êtes pas déjà, sélectionnez les composants de menu dans Visual Studio Code. La première chose que je vais faire est d'ajouter une propriété de données appelée panier, qui sera un tableau. Jusqu' à nos scripts, à l'intérieur de nos données. Ajoutons juste au-dessus obtenir des éléments de menu. Nous pouvons initialiser notre panier comme un tableau vide, puis ajouter une virgule juste après. Ce tableau sera utilisé pour stocker les pizzas, qui est sélectionné par l'utilisateur. Les autres pièces de ce tableau, nous devons ajouter une méthode au bouton ajouter au panier. Défilons jusqu'à notre bouton. À l'intérieur de la balise d'ouverture des boutons, je vais ajouter un clic « Gestionnaire d'événements » avec un clic et définir cela égal à une nouvelle méthode que vous n'avez pas encore créée appelée AddToBasket. AddToBasket va prendre deux choses. Le premier est l'élément, puis le second est l'option. L' article est l'article individuel de notre boucle, comme une Margherita. L' option est l'option de la taille de la pizza a été sélectionnée, sorte que la version neuf ou 12 pouces. faisant défiler vers le bas, nous pouvons maintenant ajouter la méthode AddToBasket. Juste après notre propriété de données, c'est bon, c'est l'accolade bouclée de fermeture et une virgule. Comment nous pouvons configurer nos méthodes objet comme ça. Je vais configurer cela comme async, donc nous pouvons faire usage d'un nom de méthode async/await JavaScript était addToBasket, qui prend dans l'élément sur l'option qui est passée quand elle appelle. Que voulez-vous que cette méthode puisse faire ? Eh bien, je ne dirai pas que la pizza est ajoutée à notre panier. Nous voulons pousser un nouvel article dans notre tableau de panier. Nous pouvons utiliser la méthode de tableau JavaScript appelée push pour ce faire. Donc, disons que le savon, nous pouvons sélectionner nos paniers. Avec this.baskets, nous pouvons utiliser la méthode push JavaScript. L' élément que nous voulons pousser est un nouvel objet pizza. On peut mettre ça en place. Nous pouvons saisir le nom de notre article, qui est passé. Ce sont les objets de pizza complets. Ainsi, nous pouvons supprimer l'élément, puis sélectionner le nom individuel. Nous pouvons également faire la même chose pour le prix. Nous pouvons prendre un article, sélectionner le prix de la pizza. Aussi la taille. La taille est disponible à l'intérieur des options. Nous saisissons l'option de cette taille. Enfin, nous voulons également définir la quantité pour être une valeur initiale de un. Maintenant, avec cela en place, nous pouvons faire un test. Si nous faisons défiler jusqu'à nos modèles, nous pouvons essayer de sortir la valeur du panier et vérifier qu'il est mis à jour avec chaque nouvelle pizza. Peut avoir cela n'importe où à l'intérieur de notre modèle que vous sortez simplement la valeur des paniers. Rendez-vous à nos projets et dans le menu. Essayons de cliquer sur l'un de ceux-ci. C' est la Margherita 12 pouces. Vous avez le nom et aussi la taille à l'intérieur d'ici. Essayons un neuf dans du jambon et de l'ananas. Ceci a été ajouté à notre panier à. Si nous allons de l'avant et ajoutons la même pizza, une fois de plus. Chaque fois que l'ananas neuf pouces, nous pouvons voir l'intérieur de notre tableau, nous avons maintenant trois articles individuels plutôt que la quantité augmentée. Nous pouvons améliorer cela encore plus en vérifiant d'abord si un article est déjà à l'intérieur des paniers. Sinon, nous ajouterons la nouvelle pizza. Si elle est déjà dans le panier, augmentera la quantité d'un. Revenons à notre méthode à l'intérieur d'ici. Avant de pousser notre pizza dans le tableau, vérifions d'abord le contenu du tableau. Nous pouvons créer une constante appelée PizzaExists. À l'intérieur, nous allons attendre this.baskets et ensuite utiliser la méthode JavaScript find. Trouver n'a rien de spécifique à voir js. C' est en fait une méthode de tableau JavaScript, qui renvoie une valeur du premier élément qui correspond à la condition que nous sommes sur le point de fournir. Le conditionnement est de vérifier si le nom de la pizza et la taille ont déjà été ajoutés aux paniers. À l'intérieur, nous avons dit que par fonction, nous voulons ajouter une fonction de flèche en ligne. Ici, nous cherchons à travers notre tableau et chaque élément qui est trouvé est stocké dans cette variable de pièce avec vérification indésirable. Si le nom pizza.name est égal à item.name. C' est le souvenir de pizza qui avait été passé à notre méthode. Nous voulons également suivre deux si le pizza.size est égal à notre option.size aussi. Si la taille de la pizza et aussi le nom de la pizza, il se trouve tous les deux à l'intérieur de notre panier. Cela signifie que cela va être vrai. On peut mettre en place une déclaration if. Nous pouvons dire que si la pizza existe, alors nous voulons augmenter la quantité d'un. Nous pouvons le faire avec PizzaExists.Quantity++. Ce que je veux revenir hors de notre fonction puisque nous n'avons pas besoin de faire la méthode push juste en dessous. Enregistrez ce fichier, et maintenant passons au navigateur. On peut essayer à la fin un pepperoni de 12 pouces, un neuf pouces. Les limites sont d'un second 12 pouces, et la quantité a été augmentée à 2, 3 et 4. Essayons-le pour un de plus. Disons jambon et ananas. La quantité est maintenant augmentée avec chaque article qui a été ajouté avec ceci maintenant en place nos paniers fonctionnent maintenant correctement. Ça n'a pas l'air super en un moment. Mais nos données sont là pour la prochaine vidéo. 9. Ajouter le panier d'achat: Nous avons fait un grand pas vers notre panier d'achat fonctionnel dans la dernière vidéo en poussant nos articles ajoutés à un tableau. Maintenant, nous pouvons créer une table pour afficher les anciens éléments en boucle à travers ce tableau. Revenons aux composants de vue par points de menu. Eh bien, je vais ajouter ce panier à la fin, juste au-dessus de notre div de clôture pour le menu. Faites défiler jusqu'aux modèles, et rappelez-vous que nous avons créé notre section de menu avec la classe de menu. Localisons la fin de notre menu. À la place de notre panier juste ici, assurez-vous que nous avons toujours le div de fermeture à la fin pour notre emballage principal. Commençons par ajouter un commentaire. Celui-ci est pour notre panier, notre panier a besoin d'un div, et je vais lui donner une classe de panier. Nous pouvons l'utiliser dans le CSS très bientôt, nous allons maintenant ajouter un titre libre de niveau en haut. Je veux ajouter un tilde de chaque côté, avec le texte tous les paniers. Commençons à construire notre table pour toutes nos données de panier. La table va avoir le corps de la table, puis notre première rangée de table. La ligne du tableau nécessite des données de table avec les éléments TD et ce premier élément de données sera pour les boutons Augmenter et Diminuer. Si vous regardez la version finie, ce sera les boutons plus et moins et aussi la quantité au centre, nous allons ensuite ajouter un deuxième morceau de données de table, qui est pour notre pizza, y compris la taille et puis enfin le prix à la fin. Le premier élément va inclure notre bouton. Cela va avoir la petite entité h, qui va être une esperluette, le hachage, puis la valeur de 8 722 avec un point-virgule. Cela nous donnera notre symbole négatif pour le déduire de la quantité. Vous pouvez également ajouter une classe, ce sera la valeur du trait de soulignement btn vert. Mais notre CSS, je vais dupliquer ceci. C' est pour le bouton plus, qui est une petite entité h de l'esperluette, le hachage, puis la valeur de 43. Entre les deux, nous voulons également ajouter un élément span, qui est pour la quantité. Je vais ajouter tout cela comme une valeur de 2. Sous notre td, nous pouvons ajouter notre deuxième ensemble de données, qui est pour le nom de la pizza et aussi la taille suivie par un morceau alpha de données pour cette ligne, qui est pour le prix, et tout prix est correct. Nous reviendrons et ferons cette dynamique très bientôt. Vous pouvez le dire et voir comment cela se passe dans les projets. Nous avons nos boutons, notre quantité, et aussi les informations sur la pizza, ainsi que le prix, définition de nos modèles. Au-dessus de la version finale, nous devons également ajouter ce total de commande juste en dessous de notre tableau. Je veux juste entendre que nous pouvons ajouter un p éléments avec les balises de tout le total et un deux-points et ensuite nous pouvons ajouter un bouton pour trouver le lieu de commande. Ce bouton peut également avoir une classe pour faire correspondre le reste avec le nom de classe btn green, save and refresh. Juste pour terminer cette vidéo, je vais aussi ajouter du CSS à ce panier, autant que le menu à gauche. Défilons vers le bas dans nos tags de style, vers le bas tout en bas. Nous allons partager un style commun avec le menu. Nous pouvons également ajouter les paniers. C' est une classe. Cela nous donnera la même couleur de fond et le même rayon de bordure que nous voyons ici et aussi pour en faire la pleine largeur de l'espace disponible. Faites défiler vers le bas jusqu'à notre requête multimédia. Le menu a pris 65 pour cent. Nous pouvons ajouter à la largeur du panier, prenons le reste du contenu, qui est 35vw, et nous y allons. C' est ainsi que nos paniers d'achat sont maintenant affichés avec des données statiques. Passons maintenant à la vidéo suivante où nous allons parcourir données de notre panier et l'afficher à l'intérieur de ce tableau. 10. Rendre le panier d'achat dynamique: Nous avons maintenant un tableau de panier sur l'écran de menu montrant quelques données statiques. Pour rendre nos données dynamiques, nous pouvons parcourir le contenu du tableau des paniers, comme nous l'avons fait avec le menu à gauche. Nous savons déjà que le tableau de panier a toutes les informations dont nous avons besoin. Ajoutons ceci pour la boucle à notre table, je vais aller aux composants du menu. Défilons jusqu'à notre table de paniers, et localisons la balise de table int ouvrant. A l'intérieur, nous avons notre corps de table où nous pouvons ajouter notre v pour une boucle. L' article que nous voulons parcourir est le panier. Nous voulons stocker chaque article de panier individuel dans la variable article et nous pouvons également ajouter en deuxième valeur notre position d'index, que nous pouvons utiliser comme clé. Nous avons combiné notre clé dynamique et l'avons définie à notre index. La prochaine chose à faire est de descendre à nos données statiques. La première pièce est la quantité de l'article, donc, à l'intérieur des accolades doubles, nous pouvons accéder à notre article et saisir la quantité de notre objet. Faire défiler la pièce suivante est la pizza à l'intérieur ici et aussi la taille. Tout d'abord, prenons l'item.name, puis comme une deuxième valeur à l'intérieur d'un deuxième ensemble d'accolades, vous pouvez également ajouter l'item.size. Ci-dessous, nous avons aussi le prix alors modifions le 695 pour être l'item.price et sa réponse pour être article, disons ceci et maintenant évidemment navigateur ajoutons quelques éléments sur le côté droit. Je vais voir que la quantité a été augmentée avec chaque article Jupiter un nouvel article est ajouté sur une nouvelle ligne maintenant nous manquons juste le prix de la fin. Jetons un coup d'oeil, nous avons l'article .price. Vérifions notre méthode en bas. C' est juste à partir de l'option alors changeons ceci et maintenant revenons. Nous pouvons essayer d'ajouter ceci une fois de plus, et nous voyons le prix. Cependant, si nous augmentons la quantité de l'un de ces articles, nous voyons que la quantité est augmentée, mais le prix total ne l'est pas. C' est quelque chose que nous pouvons facilement réparer nous allons produire le prix. Refilons vers le haut, nous pouvons multiplier le prix par l'item.quantity. Cela nous donnera un prix total, donc nous voyons que cela a été mis à jour. Nous pouvons en ajouter un de plus et le prix est mis à jour à chaque clic. Bon donc maintenant si nous donnons un rafraîchissement au navigateur, nous voulons cacher le texte et aussi le bouton de commande quand aucune pizza n'a été ajoutée. Nous pouvons masquer nos paniers en utilisant le rendu conditionnel et afficher uniquement si le tableau de panier a une longueur supérieure à zéro. Retour à notre panier, qui est la div environnante juste ici, je vais entourer cette table avec un deuxième div où nous pouvons montrer et cacher son contenu. Ajoutez un div à l'intérieur ici et puis nous pouvons ajouter av si directive pour vérifier si notre basket.length est supérieur à zéro. Cette div ne montrera que si un élément a été ajouté à notre tableau. Nous pouvons découper la balise de fermeture, puis faire défiler vers le bas jusqu'à la fin de notre table. À la div de fermeture, juste après notre bouton de commande de place. Juste ci-dessous, nous pouvons ajouter une condition else à l'intérieur d'un div séparé. Nous pouvons dire v else donc le contenu à l'intérieur ici sera un message à l'intérieur des éléments p. Je vais rendre ce message dynamique et le définir à une variable appelée texte du panier. À l'intérieur du sous juste ci-dessous dans la propriété de date mis en place notre texte de panier où nous pouvons afficher un message à l'utilisateur de votre panier est vide. Sauvegardez ceci, rechargez et il y a notre texte de votre panier est vide, en utilisant le rendu conditionnel et maintenant si nous ajoutons un article à notre tableau, il est maintenant supprimé et nous voyons les articles à l'intérieur de notre panier. Vous vous demandez peut-être, pourquoi configurons-nous notre message est un ici comme une propriété de date, au lieu de simplement ajouter le texte à l'intérieur de nos éléments p. Eh bien, c'est parce que plus tard après avoir passé notre commande nous obtiendrons également ce message pour être un message funky. Il deviendra plus utile plus tard, ensuite nous ajouterons de petites méthodes à notre panier d'achat. Nous allons brancher nos boutons d'augmentation et de diminution à l'intérieur ici, ainsi que retirer les articles du panier aussi 11. Méthodes de panier d'achat: Nous avons maintenant un panier contenant les pizzas que l'utilisateur sélectionne. Il y a quelques fonctionnalités supplémentaires et je veux l'ajouter pour améliorer cela. abord, nous pouvons faire fonctionner les boutons plus et moins, sorte que nous pouvons changer la quantité de chaque article. Également lié à cela, lorsque la quantité est réduite à zéro, nous voulons que cet article soit retiré du panier. Commençons par configurer les méthodes pour changer la quantité dans le menu des composants. Nous devons commencer par ajouter des gestionnaires de clics à ces deux boutons. Défilons vers le haut et jetons un oeil pour nos deux boutons, qui est cette section juste ici. La première chose que nous devons faire est d'ajouter un gestionnaire de clics pour le bouton moins. Donc, nous pouvons ajouter @click et définir cela égal à une méthode appelée diminution de la quantité. Lorsque nous diminuons cette quantité, nous devons également savoir quel article nous réduisons afin que nous puissions transmettre l'article. Le bouton plus juste en dessous. Cela va fonctionner de la même manière. Cela prend un gestionnaire de clics où nous allons augmenter la quantité. En passant également dans l'élément que nous voulons augmenter. Maintenant, faisons défiler vers le bas jusqu'à notre script où nous pouvons créer nos méthodes. Alors jetons un coup d'oeil pour ça. Juste en dessous de nos données, localisez la fin de notre méthode d'ajout au panier, qui est elle. Le premier, je vais ajouter AugmenteQuantity, que nous recevrons l'objet passé à elle. Augmenter l'article est assez simple. Tout ce que nous voulons faire est de sélectionner l' item.quantity et d'augmenter la valeur d'un avec plus, plus. Je vais copier ceci à une virgule où vous pouvez configurer diminution de la quantité. Tout ce qu'on a à faire pour ça, c'est de passer au négatif, et ensuite on est prêts à y aller. Enregistrez, puis passez dans le navigateur. Ajoutons quelques éléments à l'intérieur d'un ici. Donc, tout d'abord, nous avons un pepperoni. Nous pouvons augmenter cela et la quantité est augmentée avec le prix. Essayons de déduire cela et de prendre ce zéro. Si nous continuons, nous obtenons une valeur négative. Bien sûr, ce n'est pas quelque chose que nous voulons. Nous pouvons donc résoudre ce problème en créant une méthode pour supprimer l'article lorsque la quantité est nulle. Alors dirigez-vous vers nos méthodes. Je vais créer une nouvelle méthode à l'intérieur ici appelée removeFromBasket. Cela va également prendre dans l'élément que vous voulez supprimer. Nous pouvons utiliser la méthode JavaScript splice pour supprimer l'élément de notre tableau. Nous pouvons sélectionner this.basket, qui est notre tableau. Nous pouvons appeler la méthode JavaScript épissure. A l'intérieur des parenthèses, nous pouvons ajouter deux paramètres. Le premier est la position d'index de l'élément que nous voulons supprimer. Donc, nous pouvons saisir cela avec this.baskets.indexof où nous allons passer dans notre article. Donc, cela va trouver la position d'index de notre élément dans le tableau. Le deuxième paramètre est le nombre d'éléments que nous voulons supprimer. Nous ne voulons en retirer qu'un. Pour ces méthodes fonctionnent. abord, nous devons l'appeler lorsque la quantité d'article est nulle. Sous cela peut être ajouté dans la méthode de diminution de la quantité de besoin. Allons vers le bas. Nous pouvons définir pour acheter if instruction pour vérifier si le item.quantity est égal à zéro. Si c'est le cas, nous voulons appeler notre méthode de suppression du panier, qui prend en compte l'article individuel. Donnez ceci pour économiser sur le navigateur et nous pouvons ajouter quelques éléments. Commencez par enlever le pepperoni, le jambon et l'ananas. Tout fonctionne maintenant bien. Nous avons encore l'endroit tout le bouton pour pourquoi le groupe deux, qui est en bas en bas. Mais nous pouvons regarder cela plus tard lorsque nous commençons à travailler avec Firebase et les magasins de données. 12. Structurer la section administration: Bienvenue, le composant Admin va être une grande partie de cette application avec un peu de fonctionnalités à travailler à travers. Pour commencer, nous protégeons la page avec le formulaire de connexion, comme nous pouvons le voir ici sur la version finale. Seuls les utilisateurs autorisés peuvent voir la section admin. Si nous nous connectons, le reste de l'administrateur, devient alors visible. En haut, nous avons l'utilisateur connecté actuel et aussi un logo bas, suivi d'une nouvelle section pizza, ainsi que ses propres composants pour permettre à l'utilisateur connecté d'ajouter de nouvelles pizzas au menu, et ci-dessous nous pouvons voir tous les éléments qui sont actuellement dans le menu, et encore une fois, nous pouvons supprimer des éléments de notre menu et aussi une base de données à. En bas, nous avons une liste des commandes en cours, et celles-ci peuvent également être supprimées une fois terminées. Nous commençons à nouveau ma création de son propre composant appelé l'Admin W, puis nous pouvons ajouter une structure de base. Plus à notre barre latérale dans les composants, le w. sans pilote à l'intérieur ici, nous pouvons ajouter nos modèles où nous allons ajouter un div comme wrapper avec la classe d'admin. Sur ce wrapper d'appel. Ce sera le wrapper principal pour notre administrateur. Cela va avoir à l'intérieur Free différents divs. Le premier sera pour l'utilisateur actuel, ce sera ses propres composants. Nous allons avoir l'emballage du menu, puis en bas, l'emballage des commandes. Ajoutons ces divs maintenant. Le premier va être un div avec la classe du wrapper utilisateur actuel. Après cela va créer un nouveau div, qui va également avoir la classe de l'emballage de menu, et le dernier va être le wrapper des ordres, qui s'asseoir en bas. Nous devons ajouter notre script juste en dessous de cela, nous donnons un nom à nos composants. Valeur par défaut de l'exportation. Nous allons ajouter le nom du composant, et nous allons appeler le mien, l'administrateur. Enregistrez ce fichier, et nous pouvons le voir à l'intérieur du navigateur. Nous pouvons ajouter cela dans l'application w. tout d'abord, nous pouvons importer ceci. Je vais appeler cet administrateur, et c'est à partir du chemin du fichier des composants slash point, puis de l'administrateur. Nous devons également enregistrer ces composants dans l'instance de vue. Ceci est disponible à l'intérieur des modèles. Accédez aux modèles. On n'a plus besoin de ce menu ici. Je vais changer ça pour être administrateur. Retour à l'administrateur, modèles. Tout en haut, nous avons ce wrapper utilisateur actuel, que je reviendrai plus tard quand nous aurons des utilisateurs enregistrés. Pour l'instant, nous pouvons passer à l'enveloppe de menu juste en dessous et créer notre table. Cela nous donne un titre de niveau trois avec le titre de Menu. En dessous de cela, nous pouvons construire notre table. Ajoutons la tête de table tout en haut avec la première ligne de table. Cette ligne de tableau va avoir deux en-têtes. Si nous passons à la version finale, ces deux titres seront pour l'élément et aussi le texte off remove de l'élément. Nous pouvons ajouter ces dans, à l'intérieur des balises TH, l'élément, et puis juste en dessous de cela, nous pouvons également ajouter supprimer du menu. Sous la tête de table. Nous pouvons ensuite ajouter le corps de la table dans une rangée, et cela va être pour notre nom Pizza et aussi le potentiel à supprimer. La première cellule à l'intérieur des données de la table sera pour le nom de la pizza. Je vais ajouter Margarita à l'intérieur. Cela sera lu à partir d'une base de données ultérieurement. Mais pour l'instant, nous pouvons simplement étudier la valeur codée en dur suivie d'un bouton. Ce bouton va être de supprimer l'élément de menu de la base de données. Quelqu' un donne à ce type de bouton une classe de btn_reds, puis pour la croix, nous utilisons le code HTML, qui est les temps d'esperluette, puis le point-virgule. Enregistrez ce fichier, puis sur le navigateur, nous avons un menu composants mais pas utilisé dans l'application. Sélectionnez simplement commenter ceci. Alors que l'instance de vue. Nous pouvons également commenter l'impulsion. Maintenant, je vois une table très basique avec nos éléments de menu en bas. La table est maintenant en place, et nous y reviendrons plus tard pour parcourir tous nos éléments de menu, comme nous l'avons fait à l'intérieur des composants du menu. Je vais vous voir maintenant dans la prochaine vidéo où nous allons rester avec nos composants d'administration et commencer à travailler avec les commandes actuelles. 13. Lister les commandes actuelles: Nous pouvons regarder la version finale de dans les composants d'administration. Dans la dernière vidéo. Nous avons créé la table à partir de sa section de menu, et ajouté dans un exemple d'élément. Dans cette vidéo, nous allons passer à la suivante div, qui est pour les commandes actuelles. Ce sera aussi une table deux où nous allons avoir un titre en haut. Nous allons avoir un titre de tableau avec l'article, taille, la quantité et le prix, et je vais construire nos commandes juste dessous et aussi avec le bouton pour supprimer chaque article. Nous créons maintenant beaucoup de composants, et des choses telles que des tables. Avec les données statiques n'est pas la chose la plus excitante à faire, mais restez avec elle, c'est une bonne pratique et nous allons bientôt accéder à la section de base de données. Donc revenez aux composants admin, qui est le admin.view. Maintenant, je veux passer à ce wrapper d'ordres, changeons simplement cela, et puis à l'intérieur, nous pouvons construire notre titre de niveau 3, avec le titre des ordres courants. Ensuite, à l'intérieur des parenthèses, nous allons coder en dur dans une valeur. Donc nous économiserons 5 commandes. Ensuite, juste en dessous de cela, nous pouvons créer notre table. La table commencera par les têtes de table, qui seront les en-têtes de l'article, de la taille, de la quantité et du prix. Nous allons les ajouter dans leur propre ligne, puis chacun ira à l'intérieur d'un élément de titre de table. Le premier concerne un article. Dupliquons cela trois fois de plus. Le suivant est pour la taille, le troisième pour la quantité, et le dernier pour le prix. faisant défiler vers le bas sous notre section d'en-tête, nous allons ajouter le corps de la table, avec les éléments tbody. Nissez à l'intérieur de notre première rangée, et cette première rangée sera pour notre autre numéro. Je vais ajouter une classe d'ordre et ça s'appelle le numéro. C' est la section numéro de commande, en regardant le site final sera cette ligne que nous voyons ici. Vous aurez un numéro de commande ainsi qu'un bouton pour le supprimer de la base de données. La plupart vont en faire une cellule deux, faisant de cette étendue les quatre colonnes. Donc, à l'intérieur, nous pouvons ajouter un titre de table. Nous pouvons faire la travée tout pour nous-mêmes, avec la travée transversale pour être égale à quatre. Notre numéro de commande, je vais ajouter les tags forts. Donc numéro de commande. Je vais définir n'importe quelle valeur à l'intérieur ici suivi de notre bouton qui prendra le type de bouton, et aussi une classe pour notre CSS, rendre ce rouge. Nous avons la classe de bouton de btn_red. En tant que valeur, nous pouvons ajouter une entité HTML d'esperluettes, temps, puis un point-virgule. Enregistrez ceci et maintenant nous voulons voir nos projets et faire défiler vers le bas. Nous avons notre en-tête de table, le numéro de commande, et aussi le bouton. La prochaine chose à faire est d'ajouter une nouvelle ligne, qui va afficher le nom de la pizza comme ; végétarien, la taille, la quantité, et aussi le prix. Une nouvelle rangée ici. La première partie des données de table est pour le nom. Je vais ajouter Margarita. Le second est pour la taille de la pizza. Le troisième est pour la quantité, ceux-ci sont trop à l'intérieur. Le quatrième sera pour le prix. Sauvegardez et vérifions cela. Bien. Nous avons maintenant notre contenu de table là-bas, et nous pouvons maintenant ajouter un peu de style à l'intérieur de la section CSS, à l'intérieur de l'admin pour afficher les composants. Faites défiler ci-dessous les scripts. Vous pouvez avoir les éléments de style. Cela peut également être étendu à ces composants, où nous allons commencer par cibler l'admin_wrapper, qui est le wrapper principal. Tout ce que je vais faire est d'ajouter une marge de 10 pixels imbriqués à l'intérieur. Je vais cibler nos sections libres ; donc la première était current_user_wrapper, la seconde était le wrapper orders_wrapper, et la troisième est pour le menu_wrapper. Nous pouvons cibler toutes ces trois sections ensemble pour garder le style cohérent. Une certaine marge pour donner un peu d'espace en dehors de la div, 10 pixels en haut et en bas et zéro à gauche et à droite. Un peu de rembourrage à l'intérieur des divs de 10 pixels. Une bordure entourant chacun avec une ligne continue d'un pixel, et la couleur doit être f79e38. À côté de nos éléments de tableau, nous pouvons définir le texte aligner sur la gauche. On peut faire la largeur. Je veux définir ceci à 70vw, à 70 pour cent de la largeur du point de vue. Ensuite, nous pouvons cibler l'action du numéro de commande, et l'en-tête du tableau, pour donner à cela une couleur d'arrière-plan, qui va être gris clair. Ceci est la valeur de ddd. Enfin, encore une fois le numéro de commande, mais cette fois nous allons cibler le bouton. Donc, le bouton numéro de commande, qui est celui pour supprimer l'élément de la base de données. Je vais juste ajouter une marge de zéro en haut et en bas. Ajoutez 10 pixels à gauche et à droite. Donnez ceci une sauvegarde et plus au navigateur. Recharger. Il s'agit de la section de commande actuelle terminée pour l'instant. Si le tien ressemble à ça, félicitations. Vous êtes prêt à ajouter de nouveaux éléments de menu, et nous l'ajouterons dans la vidéo suivante. 14. Ajouter un nouveau composant de pizza: Plus dans le menu seulement version finie, ce ne sont pas nouvelle section pizza, est fondamentalement formulaire pour ajouter un nouvel élément à la base de données. Je vais créer une section dans ses propres composants, appelée NewPizza.vue. Vous pourriez argumenter que cela pourrait aller dans le fichier admin 2, ce qui serait aussi bien. Cependant, c'est un peu de code HTML. Donc, le composant admin le rend un peu gonflé. Comme d'habitude, allons dans le dossier des composants, et nous pouvons créer nos nouveaux composants, ici. Donc, cela va être l'extension NewPizza.vue. À l'intérieur, nous pouvons ajouter notre modèle [inaudible] et nous pouvons avoir une structure de base à notre formulaire. Donc, le formulaire qui a les balises d'ouverture et de fermeture à l'intérieur du titre libre de niveau. 15. Liaisons d'entrée de formulaire: Avec le nouveau formulaire de pizza déjà, nous avons besoin d'un moyen d'ajouter les données des utilisateurs et de les stocker à notre incidence de vue. Nous pouvons facilement le faire en utilisant V-model, qui crée la liaison de données bidirectionnelle, ce qui signifie que les valeurs des entrées de formulaire seront facturées à la propriété de données jusqu'à ce que volumineux gardé en synchronisation. Commençons par créer un nouvel objet pizza à l'intérieur de la section de données. Pour notre nouveau fichier de menu pizza, je n'irais pas à notre section de script, où nous allons ajouter la propriété data juste après le nom du composant. Nous pouvons retourner nos objets où nous allons ajouter nos nouveaux objets de pizza. Ce nouvel objet pizza formera une structure de la façon dont notre pizza sera enregistrée dans la base de données. Cet objet suivra la même structure que celle que nous utilisons dans le menu composants W. Allons à notre menu.view. Nous pouvons descendre pour obtenir des éléments de menu à l'intérieur de nos scripts. Je vais copier tout le contenu de l'un de ces objets, donc nous n'avons pas besoin des accolades environnantes. Prenons la balise de fermeture du tableau jusqu'à notre nom de pizza. Nous pouvons copier ceci et ensuite à l'intérieur de nos nouveaux objets de pizza. L' idée ici est d'utiliser ceci comme un modèle. Je vais ajouter EG au début du nom et aussi EG au début de la description. La raison en est due à la liaison de données bidirectionnelle. Nous avons déjà mentionné la liaison bidirectionnelle des données et la façon dont ces données seront reliées à nos entrées de formulaire. Ma liste de liens est bien formée, c'est en fait, nous verrons à l'intérieur de ces entrées de formulaire seront EG margarita et aussi EG suivi d'une description qui invitera l'utilisateur ce qui frappe. Ensuite, puisque c'est à deux sens, lorsque l'utilisateur tape quoi que ce soit dans ces entrées, il remplacera alors les valeurs à l'intérieur de cet objet. Nous pouvons alors aller de l'avant et pousser cette nouvelle pizza dans la base de données. Commençons par configurer cela en utilisant le modèle V-model. Nous pouvons utiliser cette boucle de champs d'entrée de formulaire à l'intérieur de notre formulaire. Allons monter. On va commencer par le nom. Nous pouvons ajouter le modèle V. Ensuite, nous combinons ceci à nos nouveaux objets de pizza. Ensuite, le nom du champ du nom, je vais copier cette section, puis descendre à la description. À l'intérieur de la zone de texte, nous allons coller ceci dans, et en supposant une nouvelle pizza.description. Ici, je vais également définir la rose initiale pour être une valeur de cinq. Lorsque X ont l'option une section et dans la taille. Si nous allons dans les entrées, nous pouvons coller cela dans. Mais cette fois, nous voulons accéder à la nouvelle pizza. Nous voulons accéder aux options, qui est un tableau. La première valeur du tableau est 0, et nous pouvons accéder à la taille. Suivant pente en option 1, nous avons le prix. Tant de pizza, les options encore au numéro de l'indice de zéro et cette fois, nous voulons accéder au prix. Pour l'option 2, nous commençons par la taille. Ce sont des options, mais c'est le premier élément du tableau. Confirmez simplement si nous descendons à l'intérieur de notre tableau, le premier élément est la position 0 et le deuxième élément est la position 1. Position1. Taille. Puis pour le prix, les options nées, puis le prix. Service, nouveaux composants de pizza et nous pouvons vérifier le silence dans le navigateur. Il verra le texte de EG margarita, la description et aussi la taille et les prix apparaissant dans les champs de formulaire à. Tout ça semble bien. Pour vérifier que la liaison fonctionne correctement, nous pouvons ajouter un écouteur de clic au bouton en bas, ce qui va déclencher une méthode. à notre bas, nous pouvons ajouter un écouteur de clic sans clic et mettre en place une méthode que je vais appeler vers le bas à toutes les instances de vue. Après la propriété de données, ici, nous pouvons mettre en place toutes les méthodes. Le nom de la méthode était impair. A l'intérieur ici pour l'instant, nous pouvons lancer une alerte, juste avec le message de la méthode déclenché et ainsi nous pouvons voir les résultats de notre objet en cours de mise à jour en temps réel. Si nous allons à l'intérieur de toutes les formes, nous pouvons également sortir notre nouvelle pizza à l'intérieur des accolades doubles avec cette nouvelle pizza point. Vers le navigateur. Nous pouvons maintenant voir notre objet pizza initial en bas. Nous pouvons alors apporter des modifications à l'intérieur de cette page, et nous les voyons immédiatement reflétées à l'intérieur de nos données. Nous pouvons également obtenir la description. Nous pouvons obtenir la taille. Essayons de mettre à jour ces deux sur la taille correspondante et le prix change également. Bien, qu'est-ce qui est maintenant tout en place ? Passons maintenant à la section suivante où nous commencerons à travailler avec notre base de données Firebase. 16. Configurer notre base de données Firebase: Les données NewPizza étant maintenant capturées avec succès, nous devons maintenant configurer notre base de données pour stocker ces informations. Je vais utiliser Firebase pour le backend du projet, et en particulier la dernière base de données Firestall. Nous allons également utiliser bientôt un paquet appelé Vivax fire, pour garder nos données de projet en synchronisation avec cette base de données également. Aussi plus tard dans le cours, nous pouvons également utiliser la fonctionnalité d'authentification Firebase, pour nous assurer que seuls les utilisateurs d'administration de connexion peuvent accéder à certaines données. Commençons la tête sur firebase.google.com. Si vous n'avez pas de compte, vous devrez vous inscrire, puis vous diriger vers la console. À l'intérieur de la console, nous pouvons maintenant créer un nouveau projet. Je vais ajouter un nouveau projet ici, et appeler la mienne Pizza Planet. Cliquez sur « Continuer ». Je ne vais pas actuellement activer Google Analytics, donc je vais créer un nouveau projet, et juste donner quelques instants pour aller de l'avant et créer. Une fois que c'est fait, cliquez sur « Continuer » et vous devriez être amené à une page qui ressemble à ceci. Nous allons utiliser Cloud Firestore comme backend. Vous pouvez soit cliquer sur cette section ici pour créer la base de données, soit cliquer sur l'option dans le menu. Cela va nous faire démarrer avec une nouvelle base de données pour notre projet Pizza Planet. Cliquez sur « Créer ». Avant de créer cela, nous avons deux options. Nous avons le mode de production, où les données sont plus sécurisées, mais nous pouvons commencer en mode test, ce qui permettra de garder notre base de données ouverte pour la lecture et l'écriture des données. On y reviendra plus tard et on changera nos règles de sécurité. Ensuite, cliquez sur « Suivant » dans le mode de test. Nous pouvons compléter ceci et finaliser notre banque de données. Une fois cela fait, nous l'amenons ensuite à la section d'accueil de notre base de données, et très bientôt c'est là que toutes nos données de notre base de données apparaîtront. Nous pouvons également ajouter manuellement une collection aussi si nous le voulions. Une collection est un ensemble de données, qui seront nos commandes et aussi notre menu. Je vais cliquer sur « Annuler » puisque nous allons pousser les données de notre projet plutôt que d'ajouter cela manuellement. Pour ajouter cette base de données à notre projet, nous devons accéder à nos paramètres Firebase, que nous obtenons dans la barre latérale, puis aperçu du projet. Nous utilisons bien sûr Firebase sur un projet web, alors cliquez sur l'icône Web juste ici. Nous pouvons alors enregistrer notre application. Je veux appeler la mienne Pizza Planet. On peut s'inscrire. Cela nous donnera accès à nos paramètres de configuration, qui doivent être ajoutés à notre projet. Je vais copier toutes les préoccupations de l'option de configuration, donc la clé API, jusqu'à l'ID de l'application. Prenons ça, passons au projet. À l'intérieur du terminal, nous allons commencer par fermer ceci et installer dans Firebase en tant que paquet NPM. Nous pouvons le faire avec NPM I, sur le nom du paquet Firebase. Pendant que cela est en cours de configuration, nous pouvons alors créer un nouveau fichier à la racine de notre source. Allons à l'intérieur de la source, à l'intérieur de la barre latérale, créez un nouveau fichier. Cela peut être appelé le firebase.js, et il va être à l'intérieur de ce fichier où nous pouvons ajouter notre configuration. Commençons par importer notre package Firebase à partir de firebase/app. En tant que deuxième importation, nous allons également importer notre firestore, qui est disponible à partir de firebase/firestore. Si vous avez utilisé Firebase dans le passé et simplement importé Firebase, les versions les plus modernes de Firebase, vous permettent de sélectionner différents paquets, tels que le firestore, seront également plus tard importer le authentification. Tous ces modules se divisent en modules distincts. Rendons ces tailles de fichier plus petites. Nous pouvons ensuite configurer nos constantes, pour notre option de configuration. Ce sera un objet, où nous pouvons coller dans ces paramètres, que nous venons de saisir de Firebase. Juste après cela, nous pouvons saisir notre variable Firebase, puis utiliser une méthode qui est appelée initialize App. Pour initialiser notre application, nous devons également transmettre les options de configuration. Après cela, nous pouvons également créer une seconde constante, qui est appelée DB, et cela va être un raccourci vers notre firebase.firestore. Avec un besoin de créer une référence de base de données, je vais exporter cette référence, afin que nous puissions l'utiliser ailleurs. Nous pouvons exporter une constante appelée, dbMenuref. Cela va être une référence ou un raccourci vers toute la collection de menus dans toute la base de données. Le raccourci va être lié à notre base de données, puis passer le nom de la collection, qui va être menu. Ce dossier de menu sera créé pour nous lors de l'ajout de la première pizza, si elle n'existe pas déjà. Nous n'avons donc pas besoin d'aller à Firebase et de l'ajouter manuellement à l'intérieur de la console. Maintenant, tout ce que nous devons faire à l'intérieur de tous les composants, est d'importer ce dbMenuref. Ensuite, nous pouvons appeler l'une des méthodes Firebase dont nous avons besoin, pour enregistrer l'élément de menu, supprimer, mettre à jour ou supprimer. Enregistrez ce fichier et revenons au fichier NewPizza.vue. Nous devons importer cette référence à l'intérieur de nos scripts. Je vais le faire à l'intérieur des accolades, puisque c'est une exportation nommée. Donc DbMenuref. Nous pouvons importer cela à partir du chemin de fichier de.. /, et notre fichier Firebase. Pour le moment, si nous passons à notre projet, lorsque nous cliquons sur le bouton « Ajouter », nous déclenchons une alerte à l'intérieur du navigateur. Mais au lieu de cela, nous pouvons maintenant utiliser cette référence de menu et utiliser une méthode Firebase appelée art pour pousser notre NewPizza à Firebase. Faites défiler vers le bas et remplacez nos alertes, en accédant au dbMenuref. Accédez à la méthode d'ajout Firebase, où nous allons pousser this.newPizza. Nous devons redémarrer notre serveur, avec NPM run serve. l'administrateur à l'intérieur de notre projet, et changer le nom. Je vais ajouter un Pepperoni. Nous pouvons également changer la description, [inaudible] mozzarella et pepperoni. Modifions aussi les prix, donc sept, et faisons cela 11. Cliquez sur le bouton « Ajouter », sur notre base de données et se dirige vers le lien de base de données. Nous voyons maintenant que notre collection de menus a été créée automatiquement pour nous. Ici, nous avons un document. Il s'agit de l'ID du document, puis de toutes les informations de notre formulaire. Nous avons nos deux options en tant que tableau, avec le nom et la description mis à jour. Espérons que tout cela a fonctionné pour vous aussi. Sinon, revenez en arrière et vérifiez le code, c'est généralement quelque chose d'aussi simple qu'une erreur de frappe. Si vous pouvez le voir dans la base de données, vous pouvez maintenant passer à la vidéo suivante. 17. Ajouter le composant de connexion: La section d'administration de l'application doit être dans la zone, laquelle seuls les utilisateurs enregistrés peuvent accéder. Nous ne voulons pas qu'un visiteur puisse ajouter ou supprimer pizzas de notre menu ou accéder à l'une des commandes actuelles. Par conséquent, nous devons ajouter l'authentification d'utilisation à notre application, et nous pouvons le faire en utilisant les projets Firebase existants. abord, nous devons ajouter un composant de connexion, que nous pouvons placer à l'intérieur de l'Admin, et nous allons le faire avec un nouveau composant appelé Login.View. Dirigez-vous vers les composants, créez login.View, où nous pouvons commencer à construire nos modèles de la manière habituelle. Je vais ajouter un wrapper. Ajoutons un div avec la classe de login_wrapper. Imbriqué à l'intérieur, nous pouvons avoir un formulaire. Ce formulaire va avoir deux sections. Nous allons nous connecter en utilisant la combinaison e-mail et mot de passe, donc nous allons créer un wrapper div tout d'abord, pour l'e-mail. L' e-mail a besoin d'une étiquette, donc c'est pour l'e-mail, et puis à l'intérieur ici, nous pouvons avoir le texte de l'adresse e-mail. Ensuite, nous avons besoin de nos entrées de formulaire. Le type d'entrée sera pour le courrier électronique, l'identifiant de l'e-mail aussi, puis la valeur de l'espace réservé, qui va être entré e-mail. Après cette section, nous pouvons ensuite ajouter un deuxième div encore dans le formulaire. Celui-ci sera pour notre mot de passe. L' étiquette du mot de passe, le texte du mot de passe, l'entrée va avoir le type de mot de passe avec l'identifiant, et une fois de plus, l'espace réservé du mot de passe. Pour terminer ce formulaire, il suffit d'ajouter un bouton juste avant la balise de fermeture du formulaire, et ce sera le type de bouton, la classe de btn_green, puis le texte de connexion. Ce composant devra maintenant être importé et enregistré afin que nous puissions l'utiliser dans le fichier admin. Donc, je me dirige vers l'Admin.View, jusqu'à notre script où nous pouvons importer nos composants de connexion, le chemin du fichier. Ceci est également dans le fichier de composants de sorte que le chemin d'accès du fichier est simplement. /Login. Ensuite, enregistrez nos composants, puis jusqu'à nos modèles où nous pouvons ajouter cela. Je vais ajouter ceci près du bas, donc juste au-dessus de la div de fermeture pour notre wrapper, ajoutons nos composants de connexion. Enregistrez ce fichier, puis allez à l'administrateur dans le navigateur où nous voyons notre nouveau formulaire en bas pour l'e-mail et le mot de passe. La position de ce composant n'est pas vraiment importante à ce stade car plus tard dans le cours, lorsque nous avons accès aux états connectés de l'utilisateur, nous rendrons conditionnellement ces composants, donc c'est le seul chose que l'utilisateur voit sur la page. Dans la prochaine vidéo, nous retournerons sur Firebase et nous commencerons à travailler avec notre authentification utilisateur. 18. Activer l'authentification Firebase: Dans la dernière vidéo, nous avons ajouté un formulaire de connexion utilisateur que nous avons en bas de notre admin. Cela sera utilisé pour transmettre des données à Firebase et vérifier si l'utilisateur est autorisé à accéder à cet écran d'administration. Firebase facilite l'authentification des compléments pour se diriger vers la console Firebase. Nous voyons l'option d'authentification dans le menu sur le côté gauche. Nous pouvons ensuite sélectionner une méthode d'inscription où nous pouvons configurer l'authentification à l'aide de différents fournisseurs. Nous pouvons utiliser les médias sociaux tels que Facebook ou Twitter ou nous pouvons utiliser une combinaison e-mail et mot de passe, que je vais cliquer sur puis activer. Une fois cela fait, appuyez sur Enregistrer. Vous verrez alors l'état activé juste au milieu ici. Cliquez sur un utilisateur et maintenant nous pouvons ajouter un utilisateur à Firebase. Cliquez sur « Ajouter un utilisateur » où nous pouvons ajouter un e-mail et aussi un mot de passe. Je vais ajouter les tester sur, puis Ajouter un utilisateur. Bien sûr, un mot de passe plus fort est nécessaire si vous l'utilisez en production. Il existe également un moyen d'enregistrer les utilisateurs à partir de l'application et cela montre cela dans la documentation si vous voulez. Il existe différentes méthodes telles que la signature avec e-mail et mot de passe. Mais cela est plus adapté aux applications où les utilisateurs publics peuvent s'enregistrer plutôt que notre cas d'utilisation, où nous avons simplement un administrateur qui peut le connecter au backend. Maintenant, nous avons un utilisateur enregistré, nous devons configurer notre authentification dans notre configuration Firebase, alors revenez à notre projet, puis le fichier Firebase.js. Nous pouvons ensuite importer notre module off de Firebase comme nous l'avons fait avec le cinq étoiles juste au-dessus. Nous pouvons sélectionner Firebase avant slash auth puis en bas, nous pouvons créer une référence à notre service d'authentification Firebase. Je vais exporter ceci en tant que constante, donc il est disponible dans d'autres fichiers. Je vais appeler cette constante par une authentification de base et définir cela égal à Firebase et accéder à la méthode auth. À l'intérieur des fichiers d'authentification, comme nous l'avons fait avec la référence de menu, nous pouvons accéder à nos méthodes d'authentification en utilisant l'authentification Firebase comme un raccourci. Nous pouvons ensuite aller aux composants de vue de connexion et maintenant nous pouvons importer cette référence d'authentification à partir du fichier de configuration. Je vais faire exploser nos modèles. Créons nos scripts. C' est une exportation nommée, donc je vais importer ceci en utilisant les accolades, donc le nom était Firebase auth et ceci provient du chemin d'accès du fichier, qui est une barre oblique point puis Firebase et nous allons utiliser cette pour créer la fonctionnalité de connexion et de déconnexion. Commençons par vous connecter en ajoutant un gestionnaire de clics à notre bouton de connexion réglable. Sur juste cette ligne ici, nous pouvons créer un gestionnaire de clic utiliser point empêcher pour empêcher le comportement par défaut d'un rafraîchissement du navigateur mis en place pour être égal à une méthode appelée connexion et cette méthode, nous pouvons maintenant créer bas à l'intérieur de notre script. Tout d'abord, à l'intérieur de notre exportation, nous pouvons ajouter le nom de notre composant qui est login. Nous devons également configurer nos méthodes et la seule pour le moment est la connexion. Ici, nous pouvons accéder à toutes les méthodes d'authentification disponibles auxquelles nous pouvons accéder en utilisant l'authentification Firebase et c'est ce que nous allons commencer à regarder dans la prochaine vidéo. 19. Se connecter et se déconnecter: Nous avons activé notre authentification avec e-mail et mot de passe dans la dernière vidéo. Cela signifie que nous avons besoin d'un moyen de capturer l'e-mail et le mot de passe que l'utilisateur saisit, et nous pouvons facilement le faire en utilisant V-model. La première étape consiste à ajouter un e-mail et un mot de passe en tant que propriété de données. Nous allons donc le faire à l'intérieur de notre exportation, configurer les données, et à l'intérieur nous allons retourner nos données comme un objet sans une virgule utilisée après les données. Nous pouvons configurer l'e-mail initialement pour être une chaîne vide et aussi la même chose avec le mot de passe. Nous pouvons ensuite utiliser le modèle V pour synchroniser cela avec les données de notre formulaire. Nous allons d'abord nous connecter à notre email. À l'intérieur de l'entrée de formulaire, nous pouvons ajouter V-model et définir cela égal à notre propriété de données qui va être e-mail. Nous ferons la même chose. Juste en dessous à l'intérieur de l'entrée de mot de passe, V-model et cette fois la propriété de données va être le mot de passe. Nous pouvons ensuite faire défiler vers le bas et terminer la méthode de connexion, que nous avons commencée dans la dernière vidéo. Tout d'abord, je vais marquer cela comme une fonction asynchrone. Nous pouvons utiliser async wait. Nous pouvons également ajouter essayer et attraper. Nous pouvons ajouter la gestion des erreurs, en passant l'erreur que nous traiterons dans un instant. Commençons par la section d'essai où nous allons nous connecter et stocker les données des utilisateurs retournés. Tout d'abord, prenons notre référence à notre authentification firebase. Par conséquent, vous pouvez accéder à toutes les méthodes disponibles dont nous avons besoin. La méthode que nous allons utiliser est une méthode Firebase appelée connexion avec e-mail et mot de passe. À l'intérieur de cette méthode, nous transmettons simplement notre email et notre mot de passe. Nous avons ceci disponible sur l'instance de vue. Nous pouvons tous accéder à this.email et this.password. Nous pouvons aussi attendre que les données reviendront. C' est tout ce que nous avons à faire pour la section essayer, descendons à la zone de capture pour collecter les erreurs. Nous allons accéder à l'objet erreur et stocker les données à l'intérieur de toutes les variables. Le premier sera le code d'erreur qui est disponible à partir d'error.code. La deuxième constante sera pour le message d'erreur, et le message d'erreur est disponible à partir de error.message. Après cela, nous allons afficher quelques alertes, qui vont être pour les messages d'erreur. Pour commencer, je vais vérifier si l'utilisateur a entré un mot de passe incorrect. Nous pouvons le faire en vérifiant si le code d'erreur va être égal à une chaîne qui est auth/ mauvais mot de passe. Si c'est le cas, nous pouvons créer une erreur personnalisée. Alors créons une alerte avec l'écran du mauvais mot de passe. Si le mot de passe est correct, nous pouvons alors créer une section L qui va attraper tous les messages d'erreur, alors ajoutons une seconde alerte avec le message d'erreur ou avec le navigateur, nous pouvons maintenant faire un test. Faites défiler vers le bas de l'administrateur, et ouvrons la console. Nous pouvons commencer par ajouter un mot de passe incorrect. Ajoutons test @test, sur le mot de passe comme test, connectez-vous. Nous recevrons le message d'erreur nous indiquant qu'aucun utilisateur n'a été trouvé. Essayons le bon, que nous avons ajouté à l'intérieur d'une Firebase et un mot de passe incorrect, connectez-vous. Nous obtenons le message de mauvais mot de passe que nous configurons. Essayons le mot de passe correct. Alors testez-les. Maintenant, nous avons utilisé l'e-mail et le mot de passe corrects, nous ne voyons aucune erreur. Plus tard, ce composant de connexion sera masqué pour révéler l'administrateur afin que l'utilisateur sache qu'il a été un succès avec l'affichage de l'e-mail de l'utilisateur connecté et aussi un bouton d'inscription. Cette méthode d'inscription est un peu plus simple et cela ira à l'intérieur du composant admin. Ajoutons plus à l'admin.view. Regardez en haut de notre modèle, nous avons déjà créé un div pour la zone utilisateur, qui est le wrapper utilisateur actuel. A l'intérieur, ça ressemblera à ça. Si nous ouvrons cela, créez la plage, qui va être le texte de connecté comme, suivi de deux-points. Ci-dessous, il y a un bouton avec le texte de déconnexion. Cela nécessite également quelques attributs à l'intérieur de la balise d'ouverture. C' est un type de bouton, une classe, BTN rouge. Nous pouvons ajouter un gestionnaire de clics où nous allons empêcher le comportement par défaut. La méthode que nous sommes sur le point de créer va être de se déconnecter. Maintenant, nous devons accéder à une nouvelle méthode/défiler vers le bas jusqu'à notre script où nous pouvons importer et nous allons désactiver le module ou impulser à l'intérieur des accolades car il s'agissait d'une exportation nommée. Nous pouvons importer Firebase off et ce chemin de fichier cette fois est../puis Firebase. Après nos composants, nous pouvons alors créer notre méthode. Donc, configurez nos méthodes, et puis à l'intérieur ici, nous pouvons créer une fonction asynchrone appelée déconnexion. Configurez une section d'essai et de capture. Transmission de l'erreur. S' inscrire avec Firebase est assez simple. Tout ce qu'on va faire, c'est attendre, Firebase off. La méthode à laquelle nous avons besoin d'accéder est la déconnexion. C' est tout ce qu'il faut faire à l'intérieur de la section « Essai ». Nous pouvons alors détecter toute erreur en alertant un message à l'utilisateur. Je vais ajouter ceci à l'intérieur du [inaudible] Donc vous pouvez insérer une variable. Erreur, déconnexion suivie d'une virgule, et insérez notre variable d'erreur. Essayons cela dans le navigateur. Rechargeons et effacons la console. Essayons tous nos messages d'erreur. Tout d'abord, un mauvais e-mail et mot de passe. Nous obtenons le message de l'utilisateur peut avoir été supprimé. Nous pouvons ajouter l'e-mail correct et le mot de passe incorrect, et nous obtenons le message incorrect. Essayons le mot de passe correct, connectez-vous, nous n'obtenons aucun message d'erreur. Faites défiler vers le haut. Maintenant, nous sommes connectés, cliquez sur déconnecter. Nous ne voyons aucun message d'erreur. Donc, ça semble fonctionner bien. Plus tard dans le cours, nous allons ajouter quelques commentaires à l'utilisateur, afficher une nouvelle adresse e-mail lorsqu'il est connecté, mais pour l'instant tout cela semble fonctionner correctement. 20. Composants finaux: Nous faisons de bons progrès avec cette application jusqu'à présent. Avant de passer à la section suivante, qui sera d'examiner le routage, je veux juste d'abord ajouter les composants restants nécessaires pour ce projet. Ils vont être des composants assez simples tels qu'une page À propos de nous et Contactez-nous. Mais ils seront utiles dans la section suivante où nous allons voir comment nous pouvons utiliser le routage pour basculer entre eux. L' un des derniers composants dont nous avons besoin est les composants About Us, alors ouvrons la barre latérale et créons un nouveau fichier appelé about.view. Cela va être assez simple où nous créons un template mais maintenant je vais ajouter un div vide. Créez également notre section de script et le nom du composant qui va être à propos de sauver ceci, et de retour dans les composants, nous pouvons créer notre deuxième fichier, qui va être contact.View pour la page Contactez-nous. Créez notre modèle ici, donc cela va avoir un div avec la classe de contact_ wrapper, un niveau pour titre avec le titre de Contact. Après cela, nous allons ajouter notre adresse pour la section contact. En haut, nous allons ajouter le nom de Pizza Planet à l'intérieur des étiquettes fortes. Ensuite, nous pouvons créer une adresse fictive séparée par des balises de rupture, les ajouter sur de nouvelles lignes. Faisons simplement quelque chose de l'adresse 1, Copier et coller cela dans quelques fois de plus, et aussi un numéro de téléphone et aussi faire cela. Il y a toujours un deuxième ensemble de balises d'adresse et ce sera juste pour notre e-mail. À l'intérieur de ces balises fortes ajoutons le titre de l'e-mail, suivi d'une balise de rupture puis d'une adresse e-mail à l'intérieur des éléments P. Maintenant, nous pouvons ajouter n'importe quelle adresse e-mail à l'intérieur ici afin de contacter à pizzaplanets.com. Une balise de script, juste en dessous de ceci et seulement besoin de balise de script est un nom des composants, qui est contact et ensuite nous pouvons ajouter nos styles juste en dessous. Je vais juste ajouter quelques styles de base pour notre wrapper de contact, qui ont été ajoutés comme notre div environnant. C' est une classe, donc les arrière-plans que je veux ajouter une valeur hexadécimale de f1e6da, une hauteur aux composants de 100 pour cent de la hauteur de la fenêtre, je vais appliquer par une marge et un remplissage, donc 10 pixels et aussi la même chose pour notre rembourrage. Le composant suivant sera pour les informations de livraison, donc il s'agit de Delivery.View. Commence avec le modèle comme d'habitude, un div environnant, qui va avoir la classe de info_block. Un titre de Delivery Info et je vais ajouter les tildes de chaque côté. Une deuxième div après cela avec la classe de contenu de bloc info. Juste pour que nous puissions cibler cela à l'intérieur du CSS. Nous pouvons ajouter un exemple de texte à l'intérieur de l'élément P donc je vais taper lorem, appuyez sur Tab pour obtenir des exemples de données. Après cela, nous pouvons ajouter une image. Pour la source de l'image, nous pouvons l'extraire à partir de notre dossier d'images. Ceci est à l'intérieur des actifs/images, puis le nom de delivery.png, les textes alt de l'image de livraison. Ensuite, tout ce que nous avons à faire après des jours est d'ajouter notre script, qui va avoir le nom de nos composants, qui va être la livraison. Les deux composantes suivantes de l'historique et du guide de commande vont être assez similaires. Je vais copier tout le contenu de ce fichier, créer un nouveau fichier et cela va être history.View, Coller dans le contenu. Tout ce que nous devons faire ici est de changer le titre de l'histoire, l' image est planets.png, le texte alt de l'image de la planète. Ensuite, le nom du composant de l'historique, sauvegardez ceci et le dernier que nous avons besoin de créer est pour le guide de commande, basé sur les mêmes données, et nous pouvons utiliser cela. Le texte de la façon de commander la source de l'image au lieu de la livraison va être order.png, le texte alt de toute l'image et enfin le titre du guide de commande. C' est maintenant pour nos composants et la majeure partie du projet est maintenant configurée. Nous n'avons pas besoin d'enregistrer ces composants car nous les afficherons en utilisant le routage dans la section suivante. 21. Installation et configuration du routeur: Bienvenue dans cette toute nouvelle section. Ici, nous allons plonger dans le routeur Vue. Le routeur Vue nous permettra de créer des itinéraires, de naviguer vers différentes parties de notre application. Pour le moment, sans le routeur, nous ajoutons simplement un composant sur lequel nous travaillons dans le fichier app.js. Nous pouvons voir à l'écran, un routeur nous permettra de basculer entre les composants pour différentes URL ou pages. Cette application est construite comme une application d'une seule page. Ceci est assez commun pour les projets JavaScript. Nous utilisons webpack pour regrouper tous nos composants et dépendances dans un seul fichier bundle principal. Cela signifie que lorsque nous visitons notre application pour la première fois, nous demanderons ce bundle au serveur. Le serveur renvoie généralement uniquement la page d'index dans tous les cas, puis JavaScript gère le basculement entre les pages. Tous nos composants à l'intérieur du navigateur sans temps pour faire une autre demande au serveur. D' où le nom des applications d'une seule page. Cela fait que notre application fonctionne très vite car ce JavaScript est beaucoup plus rapide qu'un aller-retour sur le serveur pour récupérer une page quand nous en avons besoin. Pour commencer avec Vue Router, nous devons d'abord l'installer. Nous pouvons le faire en utilisant le lien CDN , disponible sur le site router.vuejs.org. Si vous passez à l'installation, vous pouvez récupérer le lien CDN à partir d'ici, ou nous pouvons installer le module en utilisant npm, et c'est ce que nous allons faire maintenant. Plus dans les projets dans Visual Studio Code, dirigez-vous vers le terminal. Je vais installer ceci avec npm i, et le nom du paquet de Vue Router. Une fois que cela a terminé l'installation, nous pouvons passer au main.js, et commencer à configurer cela. Le fichier aide à créer et à importer. il tire notre module de noeud. Nous devons donc importer le routeur Vue. et le nom du paquet était vue-router. Aussi, puisque nous utilisons des modules ou des fichiers séparés que webpack regroupe ensemble, nous pouvons déclarer que nous voulons utiliser ce routeur dans tous nos fichiers en ajoutant view.use. A l'intérieur de la vue.use, nous passons ensuite notre routeur de vue. Ceci est disponible dans tous les fichiers, qui signifie que nous n'avons pas besoin d'ajouter l'instruction d'importation en haut de chaque fichier. Nous devons ensuite configurer la nouvelle instance Vue Router, qui prendra un objet. Juste en dessous de cela, nous pouvons configurer nos constantes appelées Routeur. Il s'agit d'une nouvelle instance de Vue Router. Objets personnels. Nous ajouterons à cet objet pour toute cette section, à partir de la prochaine vidéo, où nous allons réellement configurer nos itinéraires. Ensuite, nous pouvons injecter notre routeur dans l'instance de vue juste souffler en ajoutant dans ce nom constant du routeur. À l'intérieur de la nouvelle instance de vue, en passant notre routeur. Avec cela maintenant en place, notre routeur est configuré, et prêt à ajouter quelques routes pour basculer entre les composants. C' est ce que nous allons voir dans la prochaine vidéo. 22. Créer nos routes: Notre routeur est maintenant installé. Il est temps d'ajouter quelques routes pour nous permettre de basculer entre les pages ou composants en appelant le fichier main.js, auquel nous avons ajouté notre route vers instance dans la dernière vidéo. Nous pouvons soit ajouter nos itinéraires directement à l'intérieur, soit garder les choses agréables et soignées. Je vais mettre en place une nouvelle constante appelée routes et créer un nouveau tableau juste au-dessus des routeurs et du tableau, que nous pouvons ajouter un objet, manger des routes. A l'intérieur de cet objet, nous devons définir un chemin. Commençons par créer nos objets. Nous pouvons passer dans la propriété path. Ensuite, nous ajoutons le chemin vers lequel vous voulez naviguer. L' itinéraire Home est la barre oblique avant. Ou par exemple, si nous ajoutons le menu barre oblique, ce seront nos URL qui sont comme pizzaplanet.com/menu. Commençons par les routes à domicile. Ensuite, nous devons déclarer les composants que nous voulons rendre lorsque l'utilisateur visite la route de barre oblique avant. Je vais naviguer vers les composants de la maison. Nous aurons également besoin d'importer ce composant dans un instant. La deuxième route que je vais ajouter est pour le menu. Encore une fois, comme je chaîne le menu barre oblique avant, qui va mapper à un composant, avec le nom de mon nouveau. Ensuite, en haut de ce fichier comme toujours, nous pouvons importer nos modules, tous nos composants. Importer, le composant d'accueil. Ceci provient de notre répertoire de composants, qui est. /composants/accueil. Ces autres commandes vont être notre menu, le même chemin de fichier composents/menu. Maintenant, nous avons nos deux routes configurées quand X a besoin, transmettez-les à notre incidence de routeur. Faites défiler vers le bas, c'est tandis que les routes une constante, tout ce que nous devons faire est simplement passer nos routes d'en haut et assurez-vous que ce sont des routes pour nous permettre de basculer entre ces routes, nous devons modifier les liens de navigation d'en-tête. Passons à l'en-tête W. Nous devons utiliser un composant de liaison de routeur, naviguer entre ces routes. Pour commencer, je vais commenter le lien existant. Commentons le lien a, le menu d'accueil, contacts et aussi sur nous, n'importe quel endroit, nous pouvons ajouter un lien de routeur. Le lien de routeur ressemble à tous les autres éléments HTML. Un lien de trait d'union de routeur, ceci a une ouverture et aussi une balise de fermeture. On doit clore ça. À l'intérieur de la balise d'ouverture, nous pouvons ensuite ajouter à la propriété, puis ajouter une barre oblique avant. Ces propriétés que nous venons d'ajouter est le chemin auquel vous voulez lier et il est beaucoup est l'une des routes que nous venons de configurer dans le main.js, les composants correspondants seront rendus. A l'intérieur de notre lien de routeur, nous pouvons à nouveau passer notre lien en utilisant les éléments a, le nom du lien de la maison, puis fermer notre lien en veillant à ne pas ajouter la propriété href ici, puisque nous utilisons le routeur de vue pour gérer tout cela. Je vais copier notre lien de routeur, faites défiler vers le bas jusqu'à notre Menu. Vous pouvez ensuite modifier le lien du routeur pour être le chemin du menu barre oblique avant. Le titre du menu descend à Entrepreneurs. Le chemin est des contacts barre oblique avant et enfin la même chose pour environ. Maintenant, le routeur de vue sait exactement quels composants nous voulons rendre pour chaque route. Mais nous devons également dire au routeur de vue exactement où nous voulons qu'ils soient affichés dans nos projets dans le fichier app.view. La dernière étape consiste à ajouter les composants de vue du routeur. Pour le moment, nous avons l'admin et la maison affichage en même temps en place, nous pouvons ajouter la vue du routeur. Cela a une ouverture et aussi une balise de fermeture et ce sera l'emplacement où le composant rendu s'affichera. Cela agit essentiellement comme une sortie pour le composant sélectionné dans le menu. Cela signifie que nous pouvons maintenant supprimer tous les composants de notre script ci-dessous, toujours besoin de l'en-tête de l'application afin que nous puissions laisser celui-ci dans ou nous pourrions supprimer le menu Admin et la maison. Nous n'en avons plus besoin. Nous pouvons également nettoyer nos composants, ne laissant que l'en-tête de l'application. Avec tout cela maintenant en place, nous pouvons démarrer notre serveur de développement avec npm run serve. Rendez-vous sur le navigateur et nous pouvons ouvrir cela dans notre pot, qui est localhost 8080. Nous avons notre composante maison. Cliquons dessus. Nous pouvons ensuite aller à notre lien de menu et nous disons que cela est rendu juste en dessous. Retour à la maison. Rappelez-vous dans le main.js, nous ne configurons le Home que sur les itinéraires de menu. Si nous cliquons sur le contact et à propos de nous, nous n'avons pas encore de contenu. Il est maintenant en place. Passons maintenant à la vidéo suivante, où nous allons jeter un oeil sur les composants de liaison du routeur plus en détail. 23. Lien du routeur en détails: Dans la dernière vidéo, nous avons ajouté avec succès le lien de routeur. Le lien entre les chemins à l'intérieur de notre application. Si nous nous dirigeons vers le navigateur, puis allons faire un clic droit et inspecter, nous pouvons ouvrir les outils de développement et regarder de plus près la sortie du code. Si nous cherchons notre section d'en-tête, ouvrez ceci, puis vers le bas dans notre lien de navigation, nous voyons que nous avons notre liste non ordonnée. À l'intérieur de notre liste non ordonnée, nous avons nos articles de liste où nous avons notre lien rendu à l'intérieur ici. Cependant, si nous ouvrons maintenant le lien, nous voyons une seconde un élément imbriqué à l'intérieur. Nous savons que si nous allons à l'en-tête, le fichier de vue, que nous devrions avoir un seul lien a parce que nous avons ajouté ceci dans la dernière vidéo. Pourquoi avons-nous vu deux liens à la place ? Eh bien, c'est parce que par défaut, le composant de liaison du routeur rend une balise. Nous pouvons changer cela en ajoutant une balise jamais prop appelée, ce qui nous permettra de configurer le lien du routeur pour être un type d'élément différent. Je vais passer dans l'en-tête. À l'intérieur de notre lien de routeur, juste après les deux hélices, nous pouvons ajouter une deuxième sonde appelée Tag et définir ceci comme un élément de liste. Cela signifie également que nous pouvons maintenant supprimer les balises li environnantes puisque nous n'en avons pas besoin. Retirez ceci et aussi celui ci-dessous. Nous pouvons également supprimer les commentaires. C' est sur nos boutons. On peut faire la même chose juste au-dessus. Nous pouvons supprimer le dernier élément, configurer une balise pour être à nouveau un élément de liste et faire de même pour les deux premiers. Le menu supprime l'élément de la liste, la balise de li et enfin la même chose pour les composants de la maison. Donnez à ceci une Sauvegarder et revenir aux outils de développement. Si nous donnons à ceci un rafraîchissement, nous pouvons maintenant revenir dans notre en-tête, dans la navigation, la liste non ordonnée et ouvrir l'un de nos éléments de liste. A l'intérieur, nous voyons un seul lien est rendu et nous avons toujours l'élément de la liste environnante. Le lien ressemble plus à ce qu'il devrait être. Aussi, vous verrez qu'il y a quelques classes ajoutées à l'élément de la liste environnante. Il y a un lien de routeur, exact actif, lien de routeur actif deux. lien de routeur exact signifie que le chemin doit être une correspondance exacte. Par exemple, lors de l'utilisation de l'itinéraire domestique, nous avons la barre oblique avant par elle-même. Dans une autre route, comme la barre oblique avant ma nouvelle, cela commence également par une barre oblique avant deux. Sans cette classe exacte, les valeurs par défaut luxuriantes seraient beaucoup pour toutes les routes. Dans la classe exacte signifie que l'ensemble du chemin doit être une correspondance exacte plutôt que de simplement regarder la barre oblique avant au début. La deuxième classe ajoutée est le lien routeur actif. View router ajoute automatiquement cette classe à la liaison active actuelle. Nous pouvons le voir en action lorsque nous cliquons sur les liens ci-dessus. Si nous allons à Contactez-nous, nous voyons que cela est en train d'être supprimé. lien de routeur actif est maintenant placé sur le nouveau lien de contact. Nous pouvons également profiter de cette classe pour ajouter des CSS personnalisés. Vous pouvez également vous demander pourquoi utiliser le lien routeur du tout. Après tout, nous avions déjà une balise où nous pouvions simplement ajouter un lien aussi. Eh bien, il y a quelques raisons pour lesquelles l'utilisation de la liaison de routeur est une meilleure approche. Dans les applications d'une seule page, l'idée est que vous faites une demande au serveur pour chaque page d'accueil. Chaque page après est ensuite commutée par le routeur à l'intérieur du navigateur de sorte que nous n'avons pas besoin de continuer à faire des requêtes au serveur. L' utilisation de la liaison routeur intercepte l'événement click de sorte que le navigateur n'essaiera pas de recharger chaque page. Au lieu de cela, il bascule simplement entre les composants. C' est l'une des raisons pour lesquelles nous ne faisons pas notre l'attribut haine le lien a car cela fera une nouvelle requête au serveur. Aussi, bientôt, nous allons regarder différents modes appelés Histoire et dur et nous allons revenir sur ces bientôt. Mettre le lien routeur nous permet également de basculer entre ces modes, sans faire de changements supplémentaires. Ce n'est que quelques détails supplémentaires pour rendre le lien du routeur exactement comme nous le voulions. 24. Liaisons et routes dynamiques: Parfois, lorsque nous créons des itinéraires, nous devons tenir compte du fait que les chemins vers certaines pages peuvent également changer. Par exemple, à l'intérieur de notre URL, nous pourrions aller aux routes domestiques, puis avoir une barre oblique avant utilisateur, puis une barre oblique avant un nom d'utilisateur. Cette section de nom d'utilisateur sera bien sûr différente pour chaque utilisateur. Donc, nous pouvons vouloir utiliser les mêmes composants pour chaque utilisateur connecté ou le menu, nous pouvons avoir quelques sections différentes. Nous pouvons avoir un menu barre oblique avant et ensuite, par exemple, nous pouvons prendre des boissons, ou nous pouvons avoir de la nourriture. Nous pouvons vouloir montrer les mêmes composants de menu, mais passez simplement à différentes sections de notre menu. Cependant, ce sera difficile en raison des chemins pour le routeur, comme nous l'avons déjà appris, doit être une correspondance exacte. Pour ce cas d'utilisation, nous pouvons utiliser la correspondance de route dynamique dans, ce qui implique de dire au routeur de vue, quelles parties de l'URL peuvent changer et nous pouvons le faire dans les routes sur le point principal js. Passons à ce fichier et nous pouvons configurer le segment dynamique en ajoutant un deux-points suivi du nom de notre choix. Donc, à l'intérieur du menu, nous pouvons ajouter une barre oblique avant puis utiliser le deux-points pour déclarer que cette section sera une partie dynamique de l'URL. En ajoutant cela, les composants de menu seront affichés chaque fois l'URL se termine par le menu barre oblique avant puis barre oblique avant n'importe quel nom à l'intérieur. Le segment dynamique peut également être n'importe quelle partie de l'URL en fonction du besoin particulier. Par exemple, nous pourrions avoir une section dynamique puis une barre oblique avant, puis une section codée en dur. Ceci est utile pour des choses telles que les sections d'administration, où nous pouvons avoir une barre oblique, un ID utilisateur et ensuite, par exemple, des ordres de barre oblique. Une autre chose à noter aussi, que ce nom que nous avons donné à la section dynamique, agit également comme une variable. Nous pouvons accéder aux données à l'intérieur de nos composants en utilisant ce nom de variable. Donc, si nous allons sur les composants de menu, menu point vue, puis faites défiler vers le haut de nos modèles juste au-dessus de notre section de menu ici. À l'intérieur des accolades doubles, nous pouvons utiliser la route du symbole $ pour accéder à toutes les informations de notre itinéraire. Nous voulons accéder aux paramètres à partir de points params, puis le nom de variable des éléments. Donnez à ce fichier une sauvegarde et plus au navigateur à l'intérieur de l'URL. Nous pouvons alors accéder à notre lien. Alors allons pour le menu barre oblique avant et puis notre section dynamique, qui peut être n'importe quel mot que nous choisissons, je vais ajouter des boissons frappé Entrée. Nous voyons maintenant nos composants de menu a été rendu et cela est également retiré les paramètres d'URL et je vais le mettre à l'écran. C' est une fonctionnalité dont nous n'avons pas besoin dans notre application, donc je vais supprimer cela et restaurer le menu à l'avant menu barre oblique. Mais c'est quelque chose de vraiment utile à savoir lors de l'utilisation du routeur de vue. Aussi dans le menu, vous pouvez changer cela pour être menu barre oblique avant. Bien que vous souhaitiez également soumettre les sections dynamiques, les chemins réels dans le composant de liaison de routeur peuvent également être dynamiques. Par exemple, si nous passons à la vue point d'en-tête à l'intérieur de notre lien de routeur, les deux invites que nous avons eu une valeur codée en dur de menu barre oblique, contact et environ. Nous pouvons également rendre ces dynamiques aussi en les ajoutant à notre instance de vue. Donc, sous le nom, nous pouvons ajouter une propriété de données. Nous allons retourner un objet aussi. À l'intérieur, je vais ajouter quatre valeurs de données. Le premier sera le lien d'accueil. Configurez cela comme notre barre oblique avant, le lien de menu deux, qui est menu barre oblique, le lien de contact de contact barre oblique avant et enfin le lien à propos en bas de barre oblique avant sur. Nous pouvons ensuite utiliser ces noms de données dans le lien du routeur, préfixé par un deux-points pour indiquer que c'est dynamique. Plutôt que cette valeur de chaîne codée en dur, nous pouvons ajouter au deux-points juste avant et nous pouvons configurer ce lien pour être le lien d'accueil. Même pour le menu. Ce sera le lien de menu. Nous pouvons ajouter les deux-points à cela et nous ferons la même chose et juste dessous pour nos deux derniers liens, ajouter les deux-points. Ceci est le lien de contact et la section à propos, c'est le lien à propos. Dites ceci, et dirigez-vous vers le navigateur et allons à la maison. Vous voyez la barre oblique à la fin, le menu avant contact barre oblique et enfin sur. C' est peut-être quelque chose que vous n'aurez pas besoin d'utiliser beaucoup. Cependant, il est agréable de savoir que cela est disponible si nous avons un cas d'utilisation pour cela tel que si nous avons besoin de créer dynamiquement une URL et d'y insérer des variables. Nous pouvons ensuite les ajouter à notre propriété de données, puis mettre à jour l'URL en conséquence. Donc c'est maintenant pour le routage dynamique. Dans la vidéo suivante, nous allons jeter un oeil à ce que ce hachage est à l'intérieur de l' URL en regardant l'historique dans les modes de hachage que le routeur fournit. 25. Historique et modes de hachage: Vous avez peut-être déjà remarqué que depuis que nous avons commencé à utiliser le routeur de vue, il y a eu un hachage ajouté à la fin de l'URL. En effet, par défaut, le routeur est réglé en mode hachage et la raison pour laquelle ce hachage est ajouté est d'éviter un rechargement de page lorsqu'un itinéraire change. J' ai mentionné plus tôt que lors de l'utilisation d'applications d'une seule page, nous ne voulons envoyer la requête au serveur que pour la page d'index principale. Ensuite, les routes prennent le relais à partir de là et bascule entre les composants sans envoyer de demandes de serveur. Ce mode est utile pour nos applications d'une seule page, mais généralement, nous ne voulons pas avoir de hachage dans l'URL, car il serait beaucoup plus agréable sans un. Pour supprimer le hachage, nous pouvons changer le mode de hachage en mode historique et nous pouvons le faire dans le fichier main.js. Allons-y et nous pouvons ajouter le mode historique à nos objets routeurs. Juste en dessous de notre objet routeur où nous avons ajouté nos routes, nous pouvons ajouter le paramètre de mode et le changer pour être une chaîne appelée History. mode Historique tire parti de l'API d'historique HTML5, qui nous permet de modifier une URL particulière sans avoir besoin d'actualiser. Nous n'avions pas besoin d'ajouter le mode de hachage avant à notre instance de routeur de vue car c'est par défaut. Maintenant, si nous sauvegardons ce fichier et passez à notre application, cliquez sur le lien Accueil. Nous voyons maintenant le hachage a été supprimé et le même si nous cliquons sur nos liens vers. Cela semble maintenant mieux, mais crée également un petit problème que nous devons contourner. Nous devons également configurer notre serveur pour gérer cette nouvelle configuration. Notre serveur doit retourner l'index ou le code HTML dans tous les cas, y compris les erreurs 404. Une fois cela retourné, le routeur prend le relais et gère la commutation entre les composants sur l'extrémité frontale. Si vous le faites sur une application de production réelle, vous trouverez quelques exemples de configuration de serveur dans la documentation du routeur vue. Si vous allez à la documentation du routeur vue et dans notre option de mode historique HTML5. Ici, si nous faisons défiler vers le bas, nous pourrions trouver quelques exemples de configurations de serveurs où nous pouvons voir ces exemples pour différents types de serveurs et c'est quelque chose que nous reviendrons plus tard quand nous traitons de l'hébergement mais pour l'instant, c' est là que vous pouvez trouver quelques exemples de configurations si vous utilisez un serveur différent. La dernière chose à prendre en charge maintenant est la page index.html, qui est toujours renvoyée du serveur afin que nous n'obtenons aucune erreur 404 signalée par le serveur lorsqu'une URL n'est pas trouvée. Si nous allons à notre projet et tapons une URL non reconnue, nous n'obtenons aucun composant apparaissant à l'écran parce que nous n'avons pas de configuration de routes qui correspondent donc nous avons besoin d'un moyen de gérer ce cas et nous allons jeter un oeil à ce dans la vidéo suivante. 26. Récupérer toutes les routes et les redirections: Nous avons fini dans la dernière vidéo en mentionnant que puisque nous avons changé notre mode de routeur, nous avons besoin d'un moyen de gérer tout suivi pour les erreurs lorsqu'une URL n'est pas trouvée. C' est une solution assez simple. Tout ce que nous devons faire est d'ajouter une route fourre-tout à ces cas et nous pouvons le faire dans le fichier principal dot js-file. Nous pouvons créer une nouvelle route qui va le gérer dans notre tableau de routes. Juste après le menu, nous pouvons ajouter un nouvel objet, où le chemin sera égal à une étoile. L' étoile en tant que chemin d'URL nous couvrira pour tous les chemins qui ne sont pas appariés ci-dessus. Tout comme nos autres itinéraires, nous pouvons ajouter un composant à afficher si le chemin n'est pas adapté. Par exemple, ici, nous pourrions ajouter un composant tel que les quatre pages suivantes. Alternativement, nous pouvons également ajouter une redirection, qui va rediriger vers n'importe quelle page que nous choisissons, comme l'itinéraire d'accueil. Si nous disons cela et nous donnons un coup dans le navigateur, nous pouvons ajouter une URL non reconnue. Il est entré, et nous avons redirigé vers la route d'accueil. Voici quelques options pour nous couvrir pour les URL non reconnues. Nous pouvons soit rediriger vers une page différente ou mettre en place un composant personnalisé avec quelques instructions à l'utilisateur. Cette redirection peut également être utilisée sur n'importe quel autre itinéraire, elle n'est pas réservée uniquement à l'itinéraire attrape-tout. Dans la prochaine vidéo, nous allons continuer sur le sujet du routage et regarder comment nous pouvons ajouter des itinéraires imbriqués à notre application. 27. Routes imbriquées: Les routes que nous avons utilisées jusqu'à présent ont été assez simples. Nous avons tous nos éléments de menu. Vous êtes ici au même niveau sans objets enfants. Le routeur nous permet d'ajouter facilement des itinéraires imbriqués, regrouper des itinéraires dont la quantité est liée. Nous installons les composants dans la dernière section. Juste le guide de contact et de commande, que vous pouvez voir à l'intérieur ici. Cette idée pour nous de regrouper ensemble en tant que composants enfants ou imbriqués du lien about us retour à l'intérieur de ce fichier main.js. Nous pouvons commencer cela comme n'importe quelle autre route en ajoutant notre objet à notre tableau de routes, nous pouvons ajouter un chemin. Cette fois, nous traitons du lien à propos, donc c'est une barre oblique vers l'avant. Juste après cela, nous voulons également rendre un composant. Les principaux composants lorsque vous cliquez sur est environ. Ensuite, pour ajouter des routes enfants imbriquées, tout ce que nous devons faire est de le séparer par une virgule. Nous pouvons ajouter la propriété children, puis configurer cela comme un tableau. À l'intérieur, nous allons ajouter quelques options, peu près comme nous l'avons fait avec nos itinéraires de haut niveau. Nous allons mettre en place un objet où nous mettons en place un chemin. Le premier chemin est pour l'historique des barres obliques. Tout comme ci-dessus. Nous rendons ensuite un composant. Je vais donner au composant un nom d'histoire, qui importera dans un instant. Séparé par une virgule, je vais copier et dupliquer cela deux fois de plus. Le second sera celui de la livraison et le volet sera aussi celui de la livraison. À la toute fin, nous allons remplacer cela par le Guide de commande et aussi le chemin qui commande le guide de trait d'union. L' une des choses à surveiller lors de l'imbrication des routes de canal est le chemin d'accès à l'itinéraire. Lors de l'écriture d'un itinéraire enfant à l'intérieur de ce tableau, la façon dont nous écrivons le chemin est également importante. Si nous ajoutons une barre oblique au début, le chemin sera traité comme un chemin racine. Je vais ajouter un exemple juste ci-dessous, donc l'historique des slash nous laisserait avec notre URL telle que pizza planets.com, l'historique des slash avant. Sinon, si nous n'avions pas la barre oblique avant l'histoire, nous aurions pu simplement taper l'histoire à l'intérieur de notre chemin. Ce sera pizza planets.com. Cela prendrait en compte le chemin du parent de barre oblique avant, puis suivi de l'historique juste après. Il s'agit de deux approches différentes qui dépendent toutes de la barre oblique avant à l'intérieur du chemin, selon la façon dont vous souhaitez construire les URL. Je vais juste supprimer ces deux exemples à l'intérieur ici. Ensuite, il y a aussi une virgule pour séparer ce lien à propos. Nous pouvons également ajouter notre lien de contact deux, mais celui-ci est au niveau de la racine avec notre menu à la maison. Je vais ajouter ceci comme notre troisième point. Un chemin est un contact barre oblique avant et les composants sont pour les contacts. Caméra à la fin. Puis aussi notre administrateur deux. Cela n'est pas contrôlé par un lien de menu, mais nous pouvons toujours y accéder en utilisant la barre oblique adjointe à l'intérieur de notre URL. Ensuite, les composants de admin et une virgule à la toute fin. Nous devons ensuite importer nos composants que vous souhaitez utiliser, qui sont les composants enfants et admin et contact. Dupliquons ceci quelques fois de plus. Le menu qui change pour être admin. Nous devons également importer la page A propos, nous avons également besoin de contact. Nous avons également besoin d'historique, de livraison et de guide de commande. Livraison et enfin à la fin, nous avons besoin du guide de commande. Une fois cela fait, donnez à ce fichier une sauvegarde et dirigez-vous vers le navigateur. Voyons nos itinéraires. Nous avons notre menu toujours en marche, le contact-nous. Nous pouvons tester notre barre oblique avant Admin. Tout cela fonctionne aussi. Ensuite, nous avons enfin le lien à propos de nous qui a un composant enfant. Si nous cliquons dessus, aucun des composants enfants n'est visible. C' est parce que le composant de vue du routeur, que nous avons, si vous ouvrez l'app.view. C' est le composant de vue du routeur que nous avons actuellement. Cela affiche le composant à l'écran. Mais il ne rend que les itinéraires de niveau supérieur. Pour afficher un composant de route HL, nous devons ajouter un deuxième composant de vue de routeur imbriqué. Je vais vous montrer comment faire ça dans la prochaine vidéo. 28. Vue du routeur imbriqué: Comme nous l'avons découvert dans la dernière vidéo lorsque nous cliquons sur le lien À propos de nous à l'intérieur de notre menu, nous ne voyons que le composant vide About Us et aucun des composants enfants n'est affiché. Cela a du sens car il s'agit du composant parent, et nous voulons avoir le contrôle sur la façon dont les itinéraires enfants sont affichés. Pour basculer entre les itinéraires enfants, nous devons passer aux composants about, puis faire deux choses. abord, nous devons ajouter quelques liens de menu pour basculer entre les composants enfants. Ensuite, pour réellement afficher ces composants, le composant about aura également besoin de son propre composant de vue de routeur, que nous pouvons ajouter sous le menu. Commençons à l'intérieur de notre div, à l'intérieur des modèles principaux. Nous voulons commencer par un titre de niveau 3 avec un tilde de chaque côté. Ensuite, le texte de, « Cliquez sur les liens ci-dessous pour plus d'informations. » Les balises de navigation, qui vont imbriquer dans une liste sur commande. Cette liste sur commande va contenir nos liens. Pour cela, au lieu des éléments de liste, nous allons utiliser le lien de routeur, en nous assurant qu'il se ferme juste en dessous. À l'intérieur de la balise d'ouverture, nous pouvons ajouter nos deux accessoires, et son va vers l'itinéraire de l'historique de la barre oblique avant. Nous pouvons ajouter notre balise qui va être un élément de liste, puis imbriquée dans un lien. Nous n'avons pas besoin du href puisque le routeur de vue va gérer notre routage. Au lieu de cela, nous allons juste ajouter une classe qui va être nav link. Le texte à l'intérieur de notre histoire et ceci est nos premiers itinéraires enfants. Je vais copier ça. Rappelez-vous que nous avions trois liens. Le second sera pour le guide de commande. Ce lien va vers le guide de commande. Ensuite, le texte du guide de commande aussi. Tout le reste va bien. Le troisième et dernier lien sera pour la livraison. Changez le texte et aussi les deux accessoires, enregistrez ce fichier et cliquez sur le lien À propos de nous sur l'avant-fond sur les routes. Nous voyons maintenant notre titre de niveau 3 et nos liens de menu ci-dessous. Le style a besoin d'un peu de travail aussi, mais nous reviendrons à cela. Si nous cliquons sur les liens de l'historique, du guide de commande et de la livraison, nous voyons que l'URL est modifiée dans les deux premiers. Ces liens modifient l'URL, mais aucun composant ne s'affiche pour l'instant. Pour les voir, comme nous l'avons mentionné précédemment, nous devons également ajouter une vue de routeur pour afficher le lien sélectionné juste en dessous du menu. Juste après notre navigation, nous pouvons ajouter à l'intérieur d'une vue de routeur. Fermez ça. Sauvegardez ça. On y va. Voici nos informations de livraison, le guide de commande et les composants de l'historique. Enfin, nous pouvons terminer cela en ajoutant un peu de style dans. Tout d'abord, nous pouvons centrer le niveau 3 vers le haut en haut. Revenons à l'about.vue. Sous le script, nous pouvons ajouter les balises de style, tag est le h3. La ligne de texte va être au centre et cela pousse maintenant cela vers le milieu. En outre, les liens ont besoin d'un peu de travail aussi. Plutôt que de répéter le style pour ces liens et aussi l'en-tête principal, je vais les ajouter en tant que styles globaux. Je vais les placer dans l'App.vue sans le mot-clé scoped. C' est juste mon choix personnel de les ajouter ici dans ce fichier. Cela fonctionnera également dans n'importe lequel de nos fichiers sans la balise scope. Commençons par le corps. Je vais mettre en place la police fermement du texte Crimson. Avec un repli setit simple. La marge peut être réinitialisée à zéro. En outre, la taille de police du corps est de 1,5em. Ensuite, les liens. Le texte-décoration pour être nul. La couleur que nous allons hériter en dessous, nous pouvons cibler la liste sur commande. Je vais définir le type d'affichage pour utiliser la flexbox, afin que nous puissions justifier le contenu au centre. Nous pouvons réinitialiser n'importe quelle marge à zéro. En outre, un peu de rembourrage pour notre liste sur commande de 10 pixels en haut et en bas et zéro à gauche et à droite. Une couleur d'arrière-plan. Je vais utiliser la valeur de hachage de f1e6da. Nous devons également supprimer les puces de notre liste d'articles. Nous pouvons le faire avec le style de liste en définissant ceci sur aucun. Sauvegardez ça. Vers le navigateur. Nous devons également ajouter un espacement entre ces liens. Ici, nous avons utilisé un tilde à l'intérieur d'un élément span. Je vais ajouter une marge autour cela et utiliser également la même icône tilde et juste au-dessous aussi. Revenons à l'about.Vue et ouvrez à l'intérieur de notre modèle. Juste après chaque lien de routeur, nous pouvons ajouter une travée, l'icône tilde, et copier ceci, coller ceci juste après notre guide de commande. Je travaille à ces styles globaux dans l'App.vue. Juste après notre élément de liste, nous pouvons marquer la plage et définir la marge de zéro en haut et en bas et cinq pixels à gauche et à droite. Vers le navigateur. On y va. Il y a encore un petit style à ajouter à notre projet, mais nous y reviendrons plus tard dans le cours. Avec nos routes imbriquées qui fonctionnent maintenant, je vous verrai la prochaine fois où nous couvrirons en utilisant des routes de noms. 29. Ajouter des noms aux routes: Si nous revenons à notre main.js, où nous avons déclaré toutes nos routes pour notre application. Toutes les routes que nous avons créées jusqu'à présent ont utilisé une chaîne pour spécifier le chemin de l'URL vers laquelle vous voulez naviguer. Tels que barre oblique, menu barre oblique de chemin, contacts barre oblique de chemin et aussi sur. Cela fonctionne parfaitement bien et il n'y a rien de mal à utiliser cette approche. Il existe une alternative, cependant, qui peut être plus pratique, surtout pour les chemins plus longs. Cette alternative consiste à ajouter un nom à l'itinéraire. Nous pouvons le faire à l'intérieur des objets routes, ou nous devons faire est d'ajouter l'option de nom. Ensuite, à l'intérieur ici, nous pouvons spécifier comme une chaîne et un nom que vous voulez donner à cela. Je vais ajouter au lien d'accueil, puis une virgule juste après. Ces noms sont totalement à vous de décider. Il suffit d'aller avec quelque chose qui décrit le mieux la route prête à consommer. Nous pouvons également ajouter cela à tous nos objets sur, collez-le dans. Le second sera pour le lien de menu. Le suivant, c'est pour le lien de contact. Ensuite, le lien admin. Nous pouvons également ajouter cela à nos itinéraires canalisés vers, ce n'est pas seulement pour nos itinéraires de haut niveau. Nous pouvons ajouter ceci pour notre lien historique, la livraison, et aussi pour notre guide de commande. Maintenant, tout ce que nous avons à faire est de sauvegarder ce fichier. Je vais utiliser ces à l'intérieur de nos menus, commençant par le header.view. A l'intérieur de notre routeur, nous avons déjà une forme de routes de noms, qui a été mis en place au début de la section. Chacun de ces noms est lié dynamiquement à notre propriété dates. Pour utiliser les noms que nous venons de configurer dans un routeur. A l'intérieur de nos citations, nous devons passer ceci comme un objet, en passant le nom où la valeur est le nom de notre lien. Ensuite, nous pouvons faire la même chose pour tous les liens de menu passant objets et définir le nom comme une chaîne. Ensuite, nous pourrions faire la même chose pour le lien de contact et aussi sur. Ceux-ci ont également besoin du deux-points dynamique pour lier cela comme avant. Mais nous pouvons maintenant supprimer la propriété date entre ces balises de script puisque nous n'en avons plus besoin. Allons nettoyer ça. Ensuite, nous pouvons aller à l'about.view, où nous avons également un menu à ceux-ci ne sont pas actuellement dynamiques. Nous devons ajouter au deux-points, pour lier cela. Nous pourrions supprimer cela et hors des objets avec la propriété name et la valeur name, qui va être lien d'historique. La même chose pour le guide de commande, juste ci-dessous. Fixez notre objet avec le nom. Il s'agissait d'un lien de guide de commande. La livraison au côlon, fixez nos objets. Celui-ci était le lien de livraison. Cela devrait maintenant être tous nos liens pris en charge. Tout ce que nous devons faire maintenant est de tester nos liens, fonctionne toujours dans le navigateur. Allons-y. Nous avons la maison, le menu, le contact et les navigateurs. Le lien à propos fonctionne. Examinons cela dans l'en-tête, cela doit juste être à propos, disons ceci. Le lien à propos fonctionne maintenant. Nous pouvons tester les routes imbriquées. Historique, guide de commande et livraison. Notre URL est mise à jour avec l'URL correcte. Même si nous référençons maintenant cela par un nom. C' est ainsi que nous pouvons ajouter des noms à nos routes, et ensuite nous allons examiner les changements de routes sans avoir besoin de cliquer sur les liens en utilisant router.push. 30. Méthodes de navigation du routeur: Toutes les navigations que nous avons effectuées jusqu'à présent ont été le résultat de l'utilisation du composant de liaison de routeur pour nous conduire au chemin que nous spécifions. Il existe également une autre façon de le faire, cependant, en utilisant du code pour naviguer par programme. Si nous passons aux composants home.vue, à l'intérieur du dossier des composants, nous avons ajouté un bouton sur la ligne sept ici pour amener l'utilisateur au menu. Nous n'avons pas encore ajouté de liens vers ce bouton. Mais nous pouvons également utiliser le routeur pour pousser à n'importe quel endroit. Je vais commencer par ajouter un écouteur de clic à ce bouton à l'intérieur de la balise d'ouverture. Utilisez donc [inaudible] clic. Je vais maintenant utiliser ceci pour comprendre une méthode que je vais appeler Aller au menu. Faites défiler jusqu'à notre script. Ensuite, nous pouvons mettre en place ceci juste après notre propriété de nom. Nous pouvons configurer nos méthodes et notre nom de méthode de Aller au Menu. Nous pouvons accéder à n'importe quelle méthode qui a été fournie avec le routeur vue à l'intérieur de cette instance de vue en utilisant ce routeur .$. Rappelez-vous quoi que ce soit le préfixe avec ce $ indique que cela est natif à vue.js, ou dans ce cas le paquet du routeur plutôt qu'une méthode personnalisée que nous avons créée nous-mêmes. Ici, nous pouvons jeter un oeil à certaines des méthodes de navigation fournies par le routeur. Vue routeur nous donne la possibilité de naviguer en arrière ou avant en accédant à l'historique du navigateur. Il fait ce router.go bizarre, et c'est la première méthode que nous allons regarder. Cela prend en un seul argument pour déclarer le nombre de pages que nous voulons déplacer. Les nombres positifs déplacent les pages vers l'avant dans l'historique du navigateur. Numéros négatifs, va revenir en arrière d'une page dans le navigateur. Nous pouvons tester cela en passant à notre application. Alors donnez une économie à ça. Cliquez sur le « Menu », et cliquez sur « Accueil ». Maintenant, si nous cliquons sur le bouton gauche, il devrait nous ramener une page qui était au menu. Essayons celui-là de plus. Si nous allons sur le lien à propos et puis à la maison, cliquez sur ce bouton il devrait nous ramener à la page À propos. Ce nombre peut également être plus d'un, si vous avez un cas d'utilisation pour cela. Une autre méthode qui est disponible sur le routeur est router.replace. Ceci est utilisé pour remplacer l'URL actuelle par celle que nous ajoutons à l'intérieur de ces crochets. Donc, si nous voulions aller au menu, nous pourrions ajouter une chaîne de menu barre oblique, sur le navigateur. Allons au Contact, puis à « Accueil ». Cliquez sur le bouton. Cela nous pousse ensuite à la page de menu. Ou tout comme on l'a vu dans la dernière vidéo. Nous pourrions également passer un objet et utiliser des routes nommées en passant la propriété name. Ensuite, notre lien de menu, que nous configurons. Donnons un coup d'envoi à ça. Contacts, maison et cela nous pousse toujours au menu. Cependant, il y a un inconvénient potentiel lors l'utilisation de cette méthode de remplacement. Je vais te montrer maintenant. Si nous allons par exemple, à la page À propos, puis cliquez sur « Accueil », cliquez sur le bouton « Let's Order ». Si nous revenons ensuite en utilisant le bouton de retour du navigateur, cela nous ramène à la page À propos de nous plutôt que à la page d'accueil qui était les composants précédents. La raison pour laquelle cela se produit est comme le nom l'indique, l'historique de navigation est remplacé plutôt que ajouté à. Si nous voulons ce lien, nous allons être ajoutés à l'historique du navigateur afin que nous puissions utiliser les boutons de retour de cette façon. Il existe une autre méthode à notre disposition appelée router.push. Ceci est également utilisé pour naviguer vers une URL différente. Mais la différence est les routes et sont poussés dans l'historique de navigation plutôt que remplacés. Donnons un coup d'envoi à ça. Changements à pousser. Nous ferons la même chose qu'avant, nous allons à propos, à Accueil, cliquez sur le bouton, ce qui nous amène au menu. Maintenant, si nous revenons en arrière, nous prenons maintenant le composant d'accueil plutôt que la page À propos. Ces deux méthodes sont bien à utiliser, mais bien sûr, cela dépend du comportement que vous voulez atteindre à l'intérieur de votre application. 31. Gardes de navigation globale: Parfois, lorsque vous naviguez entre les routes, nous voulons effectuer une action avant même que l'itinéraire ne soit navigué aussi, ou juste après. Par exemple, nous allons configurer alerte ouverte pour se charger juste avant la navigation de la page d'administration, qui indiquera à l'utilisateur qu'il s'agit d'une zone restreinte, et il devra d'abord se connecter. En outre, lors de la sortie de l'administrateur, une alerte apparaîtra également, ce qui indiquera à l'utilisateur qu'il sera automatiquement déconnecté en quittant cette zone d'administration. C' est pour des raisons de sécurité. dangers de VuerOuter ont couvert ce cas d'utilisation en nous fournissant des gardes de navigation, comme les crochets d'instance Vue. Les gardes de navigation nous permettent de nous accrocher à certaines étapes de la navigation. En outre, nous pouvons les ajouter globalement pour toute notre application ou les appliquer localement à certains itinéraires. Commençons par jeter un oeil sur le global avant chaque garde. Je regarde cela dans le main.js. Après notre routeur ici, nous pouvons accéder à nos itinéraires disponibles, puis y accéder avant chaque crochet. Cela va prendre une fonction, et cela prend également trois arguments, que nous allons jeter un oeil dans un instant. En outre, comme il s'agit d'un hook global, le code que vous ajoutez est exécuté chaque fois qu'une action de routage est déclenchée. Par exemple, regardez ajoute une alerte qui détecte la désactivation de la navigation déclenchée. Si nous enregistrons maintenant ceci et que nous allons sur le navigateur, nous voyons les alertes apparaître tout de suite, ainsi que pour chaque lien de navigation sur lequel nous cliquons. Cela fonctionne bien, mais notez qu'il n'y a pas de composants de page à l'écran. C' est parce que l'action de routage ne sera pas terminée tant que nous n'appelons pas une fonction appelée next. Ensuite est l'un des trois arguments que nous pouvons passer avant chacun. Le premier est de, et c'est la route dans laquelle nous naviguons. La seconde vient, et c'est la route que nous partons. Ensuite, nous avons enfin la fonction suivante, et c'est cette fonction suivante que vous pouvez passer pour compléter la navigation et charger les composants de la page. Si nous passons maintenant, cliquez sur l'alerte, l'action de routage est terminée. Nous passons ensuite aux composants de page sur lesquels nous avons cliqué. Cette fonction suivante indiquera au routeur Vue de passer au prochain crochet de navigation, s'il y en a un. Si aucun autre crochet n'est disponible, alors comme nous l'avons vu ici, la navigation n'est pas confirmée. Nous pouvons également arrêter cette navigation si nous avons un cas d'utilisation pour cela, en passant une valeur booléenne de false. Cela empêchera alors le chargement des composants de la page. Ce sera le même pour chaque itinéraire de navigation. Nous avons déjà mentionné que nous avons également accès aux données vers et depuis, que nous avons également transmis en tant qu'arguments. Pour les voir, nous pouvons passer dans un journal de console, en prenant la valeur à, et nous pouvons voir exactement quelles données sont fournies ici. Donc, faisons cela sur le navigateur et cliquez avec le bouton droit sur Inspecter, puis cliquez sur la console. En outre, comme note de côté, si elle est réduite à nouveau, aucun message d'erreur de console dans le navigateur. Il s'agit d'un paramètre dans ESLint. ESLint est fourni lors de la configuration de l'interface de ligne de commande Vue. Ceci est utilisé pour vérifier le code pour les erreurs. Parfois, par défaut, lors de l'utilisation d'ESLint, les messages de la console fournissent une erreur. Donc, si vous avez besoin de désactiver cela, dirigez-vous vers le package.js sur le fichier, ouvrez ceci, et ici nous aurons un ES nommé config objets. A l'intérieur de cet objet, si nous faisons défiler vers le bas, à l'intérieur des objets de règles, nous devons ajouter une valeur de nom par pas de console et off. Si vous ajoutez ceci, enregistrez le fichier, puis redémarrez le serveur de développement. Vous ne devriez alors avoir aucun problème à afficher la console, incapable de continuer avec le reste du cours. Aussi, encore une fois, avec ESLint, nous pouvons avoir besoin de supprimer toute barre oblique inutilisée supprimer d'un prochain, et de regarder l'objet à l'intérieur de la console. Nous allons, par exemple, cliquer sur le menu et ouvrir cet objet qui est fourni d'avant chaque. C' est donc le chemin dans lequel nous naviguons. On va au menu. C' est le nom du routeur. Nous pouvons voir si des paramètres ont été transmis, et nous avons accès à l'une de ces propriétés à l'intérieur de notre code. Donc, plutôt que d'utiliser le journal de la console, par exemple, vous pouvez ajouter une instruction if pour vérifier si le chemin d'accès et d'accès sera égal à l'écran ou au menu barre oblique avant. Si c'est le cas, nous allons continuer sur les routes et nous dirons d'autre. Suivant va être égal à faux. Cela permettra maintenant au routeur d'aller uniquement aux composants du menu et l'une des pages sera bloquée. Puisque nous faisons maintenant usage de la prochaine, nous pouvons également passer dans le reste de nos arguments. Donc, à partir de maintenant, disons même la tête au navigateur. Donc maintenant, si nous cliquons sur les itinéraires d'accueil, nous ne voyons aucun composant. Si nous cliquons sur le menu, nous avons autorisé ceux-ci à se charger puisque le chemin est égal au menu. Essayons les contacts et ceci est bloqué. La même chose avec nous, et aussi revenir à la maison avec avant chaque. Nous avons également disponible l'après-chaque garde mondiale à. Comme son nom l'indique, ceci est appelé après que chaque navigation est confirmée. Cela ne peut pas affecter la navigation car elle est effectuée une fois la navigation terminée. Par conséquent, il ne reçoit pas la fonction suivante en tant qu'argument. Donc, appeler la fonction suivante n'est pas nécessaire aussi. Nous pouvons voir cela à nouveau en passant une alerte, et tout texte à l'intérieur ici, nous dirons après chaque, enregistrer et plus au navigateur. Encore une fois, nous ne pouvons pas utiliser besoin d'argumenter, donc nous pouvons avoir besoin de les supprimer. Nous voyons l'alerte, cliquez sur OK, contactez-nous, et c'est bien chargé aussi. Ainsi, comme vous pouvez le voir, même sans l'appel suivant, les composants des pages sont toujours rendus, et nous voyons l'alerte affichée comme prévu. C' est un crochet jamais utile qui peut être nécessaire si nous avons besoin d' effectuer une action après la fin de l'itinéraire. Encore une fois, ce sont les deux gardes mondiaux qui vont être utilisés pour chaque itinéraire. Dans la vidéo suivante, nous allons jeter un coup d'œil aux protections de composants, qui n'affecteront que les composants que nous naviguons vers et depuis. 32. Protections des composants: Dans la dernière vidéo, nous avons regardé les gardes de navigation mondiaux, qui affecteront l'ensemble de notre application. Une alternative à cela est de n'ajouter qu'une garde à l'intérieur d'un composant. De cette façon, seuls les composants à naviguer vers et en provenance seront affectés par la garde. La première chose que je vais faire est de supprimer le garde global de la dernière vidéo à l'intérieur du main.js afin, l'alerte ne s'affiche pas pour chaque navigation. Ensuite, je vais me diriger vers les composants admin.view et commencer par le dossier components. Je vais ajouter un garde à l'intérieur de ces composants. Je vais commencer par la route avant entrer garde, et ajoutons cela juste après nos composants. Cela peut être ajouté n'importe où sur l'instance de vue, et le nom sera avant le capteur de route, qui va à nouveau prendre en de et aussi suivant comme arguments, ajouter une virgule pour séparer cela des méthodes animaux pour ajouter la propriété [inaudible] juste au-dessus pour travailler avec. Nous pouvons retourner des données. Ajoutons un nom, une propriété et ajoutons votre nom à l'intérieur d'ici. Avant l'entrée de route est appelée avant l'itinéraire, qui quand il est composant est confirmé. Ici, je vais créer une alerte qui va dire bonjour à l'utilisateur. Nous avons le nom de l'utilisateur juste au-dessus de la propriété dates. Je vais ajouter ceci comme une chaîne de modèle à l'intérieur des ticks arrière. Vous pouvez ajouter à l'intérieur de notre variable, qui va être ce nom. La défection se trouve à l'intérieur du composant admin uniquement. Donnons ceci une sauvegarde et dirigeons vers l'administrateur lié pour voir cette action. Nous pourrions également avoir besoin de supprimer nos arguments libres pour que cela fonctionne. Nous cliquons sur l'un de ces liens, nous ne voyons pas l'alerte. Essayons d'aller aux routes d'administration slash localhost. On ne voit pas l'alerte qui vient de se mettre en place. Allons à la console et jetons un coup d'oeil. Nous voyons un message d'erreur rouge ne peut pas lire le nom de propriété de undefined. Cela peut ne pas être immédiatement évident quel est le problème ici. y a en fait rien de mal à la façon dont nous configurons la propriété name. En fait, le problème se produira si nous essayons d'accéder à quelque chose de notre point de vue incidence. La raison derrière cette zone est que la garde est appelée avant même que le composant n'ait été créé. C' est pourquoi nous n'avons pas accès aux données sur l'incidence de notre vision. Si nous avons besoin d'ajouter nos données d'instance de vue à l'intérieur de ce hook, nous devons ajouter un contournement. Pour ce faire, nous devons passer un appel à la fonction suivante. Nous devons encore ajouter à partir de la prochaine. Nous pouvons passer dans la fonction suivante, qui va ajouter une fonction de rappel, qui s'exécutera une fois qu'un composant a été créé. Il dit à propos de la fonction à l'intérieur ici, je vais ajouter comme une fonction étroite passant dans VM, ce qui est court pour le modèle de vue. VM peut être n'importe quel nom de votre choix. Mais lors de l'utilisation de la vue, il est assez traditionnel d' utiliser VM comme un nom à l'intérieur de ce rappel. Ici, nous avons accès à la même instance de vue en utilisant VM à l'endroit où nous l'utilisons habituellement. Maintenant, nous pouvons saisir notre alerte. Nous pouvons ramener cela dans notre fonction de rappel. Nous pouvons ensuite remplacer cela par VM, et cela devrait maintenant fonctionner. Ce que nous faisons ici est essentiellement de créer une fonction de rappel. Une fois la navigation confirmée et notre composant a été créé. Une fois que le composant est créé, nous avons ensuite accès à nos données d'incidence de vue et nous pouvons maintenant accéder est à l'intérieur de cette fonction de rappel. Tout ce que nous devons faire est de remplacer le mot-clé this par VM. Sauvegardons ceci et dirigez-vous vers le navigateur. Rechargeons. Nous voyons maintenant le message de Salut, Chris. Si vous allez à d'autres routes, cela ne fonctionnera pas puisque nous l'avons seulement dit sur les composants admin. Maintenant, nous avons ce travail et nous pouvons passer à la prochaine vidéo où nous allons jeter un oeil sur les itinéraires individuels des gardiens. 33. Surveillance des itinéraires individuels: Le dernier type de garde que je veux vous montrer est le garde d'entrée avant, qui peut être ajouté directement à l'endroit où nous définissons nos routes dans le main.js. Avant de créer ceci, je vais supprimer tout code inutile pour notre application. Donc, dans l'administrateur de la dernière vidéo, nous pouvons supprimer avant l'entrée de route, ainsi que la propriété de données que nous avons mis en place pour cela. Enregistrez ce fichier et plus dans le fichier main.js. Je vais ajouter ce nouveau garde de navigation aux routes d'administration. Donc, pour rendre cela plus lisible, je vais les ajouter sur deux lignes séparées, séparées par une virgule juste après nos composants, nous pouvons ajouter l'entrée avant, garde avantEnter fonctionne comme le global avant d'entrer garde et prend également les mêmes arguments libres de deux de notre prochain. Nous avons dit le serveur comme une fonction. Je vais ajouter une alerte ici, qui va envoyer une chaîne de texte à l'utilisateur pour dire que cette zone est réservée aux utilisateurs autorisés. Veuillez vous connecter pour continuer. Après nos alertes, nous devons également passer dans la fonction suivante pour terminer la navigation. Disons que c'est maintenant si nous passons au navigateur, et tout d'abord, nous pouvons tester les routes individuelles à l'intérieur de l'en-tête et nous ne voyons aucune alerte pour ces quatre liens. Si nous passons maintenant à la barre oblique Admin, où nous allons appliquer ces gardes de navigation. Nous voyons que notre alerte est maintenant apparue. Bien sûr, juste faire apparaître une alerte n'est pas sûr de la sienne. Mais plus tard, nous allons cacher la zone d'administration et seulement affiché pour les utilisateurs connectés. Nous allons également plus tard, sont-ils avant route quitter dieu, à l'intérieur des composants d'administration pour lors de la sortie de la zone d'administration. Dites automatiquement déconnecter l'utilisateur lorsque vous naviguez loin de l'administrateur. 34. Définir le comportement de défilement: Lorsque nous accordons tous, nous pouvons vouloir préserver la position de défilement. Nous leur demanderons lors de la revisite d'une page, ou bien, nous pouvons vouloir faire défiler jusqu'à une sous-position sur la page lorsque vous naviguez dans celle-ci, même si elle se trouve seulement en haut de la page. En utilisant le routeur de vue, nous avons un contrôle total sur le comportement de défilement. Cela dépend également du mode routeur défini sur les modes d'historique. Nous avons déjà le mode historique activé dans le main.js, donc nous pouvons en profiter. La première chose à faire dans le main.js, est d'ajouter la fonction de comportement de défilement à l'instance du routeur. Jetons un coup d'oeil, à l'intérieur de notre routeur ici, je vais ajouter le comportement de défilement. A l'intérieur des parenthèses ou des parenthèses. Tout comme les dieux que nous avons regardés, il ne faut que pour et depuis les objets de la route. Aussi un argument que nous passons dans un froid, disons position, qui est la position, disons par le navigateur lorsque les boutons arrière ou avant ont été utilisés. Dites position. A l'intérieur de cette fonction, nous pourrions définir notre comportement de défilement. Probablement la façon la plus simple de le faire est de renvoyer un objet. Je passe la position x et y, laquelle vous voulez faire défiler lorsque vous naviguez vers une page. Nous pouvons retourner nos objets. Nous pouvons définir l'exposition sur zéro et ensuite définir le y sur zéro aussi. En utilisant cette configuration, chaque fois que nous naviguons vers un itinéraire, la page sera défilée vers le haut. Vous voyez ce modèle en action. Changons l'axe y pour être 200. Cela va charger une nouvelle page, 200 pixels du haut. Sauvegardons ceci et bien sûr, nous devons supprimer nos arguments libres afin que vous n'ayez aucun problème Linton puisque nous n'utilisons pas ceux-ci. Allons à la maison. Nous n'avons pas assez de contenu sur cette page pour faire défiler vers le bas. Essayons le menu et vous pouvez voir que nous sommes à 200 pixels du haut. Alternativement, nous pouvons passer un sélecteur CSS à la place des coordonnées. Allons pour un sélecteur et ouvrons les composants du menu. Nous pouvons définir le comportement de défilement pour faire défiler l'un de nos sélecteurs CSS. Nous pouvons choisir un bouton, nous pouvons choisir une classe. Nous pouvons choisir n'importe quel ID ou simplement un élément par son nom. Je vais aller chercher le panier. Allons pour la classe des paniers. A l'intérieur du main.js. On peut garder notre objet. Ce qui remplace par un sélecteur, qui va être une chaîne. Puisque c'est une classe, nous pouvons cibler cela avec le point et le nom est paniers. Donnez-nous un coffre-fort. Allons à la maison. Puis revenons à notre menu. Maintenant, vous pouvez voir que le navigateur a été défilé vers le bas jusqu'à l'emplacement du panier. Cela fonctionne pour tous les deux sélectionnés juste [inaudible] lors de l'utilisation de CSS. Rappelez-vous que nous avons mentionné le paramètre de position sûre que vous avez transmis. Cela permet d'enregistrer la position de défilement lorsque les navigateurs en avant et en arrière sont utilisés. Jetons maintenant un coup d'oeil à la façon dont nous pouvons l'utiliser. Passons dans nos arguments une fois de plus, qui était à, à partir et une position sûre. Je vais ensuite ajouter une déclaration if. L' instruction if va d'abord vérifier s'il y a une position enregistrée. Si la position enregistrée est vraie, nous allons retourner la position enregistrée. Nous en avons un disponible, nous allons faire défiler jusqu'à cette position. Si ce n'est pas le cas, nous allons ajouter la condition else où nous allons simplement retourner un objet où nous avons configuré la position x et y pour être zéro, tout comme nous l'avons vu auparavant. Donc, pour voir cela en action, nous devons aller sur le navigateur et naviguer entre quelques pages. Donc, tout d'abord, allons au menu, puis faites défiler jusqu'au bas. Nous pouvons ensuite utiliser le bouton Précédent puis le bouton Suivre pour revenir au menu. Je suis une opposition en bas de page. Si nous essayons à nouveau, si nous faisons défiler un peu vers le haut, juste pour que nous puissions voir un peu d'espace dans le menu. Si nous essayons de revenir en arrière, puis transmet le navigateur, position enregistrée, nous renvoie exactement au point où nous étions dans le menu. Le dernier que je veux vous montrer garde la position sauvée, comme celle que nous venons de regarder. Cependant, cela fonctionne lorsque vous passez d'un composant à l'autre en utilisant des liens de menu, plutôt que simplement en utilisant les boutons de retour ou de transfert dans le navigateur. Nous pouvons à nouveau utiliser une instruction if. Mais plutôt que la position enregistrée, nous allons utiliser les deux arguments et sélectionner le dur, et cela va d'abord vérifier si l'itinéraire dans lequel nous naviguons a un hachage d'emplacement enregistré. Si c'est le cas, nous allons définir le sélectionné pour être égal à la valeur de ce hachage. On peut retourner à l'intérieur des accolades, un sélecteur comme avant. Sur le sélecteur que nous allons ajouter est à .harsh. Nous devrons également supprimer les paramètres inutilisés afin de ne pas voir d'erreurs. Cette notion, nous avons besoin d'ajouter plus de contenu à l'une des autres pages. Je vais aller au contact et simplement copier tout le contenu du rappeur de contact. Être shoots, garder la div environnante, et coller cela dans quelques fois plus juste pour nous donner un peu plus de contenu à l'intérieur des contacts où nous pouvons faire défiler vers le haut et vers le bas. Nous fermons la barre latérale en arrière dans la principale. Nous pouvons également supprimer la section L ici, ce fichier enregistrer et plus dans le navigateur. Maintenant, si nous avons le contact et le menu avec du contenu où nous pouvons faire défiler vers le bas, je vais faire défiler vers le bas jusqu'à juste au-dessus du drapeau. Nous avons ceci comme point de référence. Passez à la page de contact. Nous voyons que la position du navigateur a été sauvegardée dans le menu. Cela conservera la position enregistrée entre les composants. Cela ne fonctionnera pas si vous allez à la maison, par exemple, ou à propos de nous parce que nous n'avons pas assez de contenu. Faites défiler aussi. Mais cela vous donne l'idée de comment cela fonctionne de toute façon. C' est tout maintenant pour cette vidéo. Juste pour terminer cela, je vais rétablir la page de contact juste pour récolter le contenu une seule fois. Donnez ceci pour enregistrer et restaurer cela à la normale. Ce sont les options disponibles pour contrôler le comportement de défilement. Ensuite, nous allons refactoriser nos itinéraires en les déplaçant dans leur propre fichier. 35. Refondre nos routes: A l'intérieur de notre main.js où nous avons créé nos routes. Ce tableau de routes est assez gérable pour le moment. Nous n'avons pas trop d'installation. Mais vous pouvez voir comment il peut vraiment encombrer notre fichier main.js surtout si vous ajoutez plus de gardes de navigation ou de composants enfants. Nous pouvons prendre toutes ces routes vers le main.js et les placer là dans un fichier, ce qui va ranger les choses et le rendre plus organisé. Faire cela est une installation assez facile. abord, je vais ajouter un nouveau fichier dans le dossier source. Je vais ajouter ceci à la racine de la source et appeler ceci le routes.js, puis revenez au main.js. Tout ce que nous devons faire est d'attraper le tableau complet des routes. Du carré de fermeture, jusqu'à notre constante, je vais découper ça. Tout à nos routes, nous pouvons maintenant coller cela dans car c'est un routeur. S' il s'agit de composants, nous devons également les importer. Nous pouvons les saisir, et Visual Studio Code en fera une couleur différente. Nous pouvons voir que nous ne les utilisons plus. Je vais découper tous ces composants qui n'ont plus besoin, placez-les dans notre routes.js. Ensuite, nous devons exporter cet objet aussi. Puisque ce fichier est maintenant dans son propre fichier autonome, nous devons également exporter ce fichier, afin que nous puissions l'importer de nouveau dans notre main.js. Avec un nom correspondant de routes, que nous avons donné juste ici. L' emplacement sous forme de chaîne est une barre oblique de points, puis les routes. C' est tout ce que nous avons à faire. Nous pouvons maintenant passer à notre application et tester si les itinéraires fonctionnent toujours bien. Essayons les contacts du menu, le sujet, et aussi nos itinéraires enfants fonctionnent aussi. C' est quelque chose qui n'est pas nécessaire sur les petites applications, mais c'est quelque chose qui peut garder une application plus grande ou croissante plus organisée, et c'est aussi quelque chose qui est assez simple à faire. 36. Vues du routeur nommé: Si nous revenons à l'application principale, le fichier Vue. A l'intérieur d'un ici, nous avons une vue routeur-vue. Nous avons jusqu'à présent examiné l'utilisation de cette vue de routeur pour basculer entre les composants. En outre, comment nous pouvons utiliser les composants router-view pour afficher les itinéraires enfants à l'intérieur des composants ci-dessus. Nous pouvons également utiliser plusieurs composants de routes de vue à l'intérieur de notre application. C' est ainsi que nous pouvons afficher plusieurs vues sur la même page, plutôt que de simplement basculer entre des composants uniques. Par exemple, à l'intérieur de cette application le fichier Vue, nous avons ce composant router-view pour basculer entre le contenu principal. Nous ne sommes pas limités à une seule prise, nous pouvons ajouter autant de vues routeurs-vues que nous le voulons en leur donnant un nom. Nous avons déjà mis en place quelques composants d'information que nous utilisons dans le sujet. Nous avons le guide de commande, les informations de livraison et l'historique. Ce serait également idéal pour afficher sur la page d'accueil en utilisant une nouvelle vue de routeur. Réglons cela juste en dessous de notre vue routeur actuelle. Je vais l'utiliser pour afficher ces trois composants. Mettons en place un div avec la classe de info_block_wrapper. Maintenant, pour afficher nos composants d'information gratuits, nous pouvons ajouter plus de vues routeurs-vues, mais cette fois avec l'attribut name. Vue routeur avec l'ouverture et la balise de fermeture. A l'intérieur de la balise d'ouverture, nous pouvons ensuite ajouter le nom et nous voulons définir ce nom pour être guide de commande. Ensuite, dupliquez ce deux fois de plus. Le second sera pour l'exécution, et le troisième pour l'histoire. Sauvegardez ça. Si nous revenons sur le navigateur et cliquez sur notre lien « Accueil ». Nous ne voyons aucun composant actuellement affiché à l'écran, c'est parce que nous devons d'abord les ajouter à nos itinéraires. Alors passons à notre nouveau fichier routes.js. Puisque nos liens d'accueil afficheront maintenant plusieurs composants, nous devons changer le composant de propriété juste ici, avoir un s à la fin pour faire ces composants. Supprimez le lien d'accueil. Cela va maintenant prendre dans un objet où nous pouvons ajouter les composants en tant que paires de valeurs clés, tout comme nous le faisons lors de l'enregistrement d'un composant à l'intérieur de l'instance de vue. abord, nous ajoutons un composant par défaut, qui va être la maison. Il s'agit du composant rendu dans la vue routeur sans nom. C' est l'original qu'on avait juste en haut. Cela le gardera comme nous l'avions avant avec les composants de la maison. Nous pouvons ensuite configurer nos vues routeur-routeur gratuites juste en dessous de tout avec des noms correspondants. Le premier était le guide de commande. Nous voulons mapper cela à la façon des composants appelés guide de commande. Le suivant était pour la livraison. Nous voulons mapper cela à la façon des composants appelés livraison. Le troisième était pour l'histoire. Voyons cela dans le navigateur. Retour à la page d'accueil. Nos composants libres ont désormais pris la place de nos vues de routeurs nommées. De plus, les composants de base par défaut prennent la place de la vue routeur, qui n'a pas de nom. Cela nécessite également un peu de travail avec ces styles aussi lorsque nous avons créé le guide de commande, composants de livraison et d'historique. Si on les regarde, on peut les ouvrir. A l'intérieur du modèle, nous avons ajouté une classe de info_block comme wrapper, ainsi qu'une classe de info_block_contents, qui est pour le titre et aussi l'image. Si on retourne à l'app.vue. Nous avons également entouré ces composants libres dans une classe appelée info_block_wrapper. Nous pouvons cibler ces classes dans le CSS, commençant par la plus petite vue d'écran. En bas, nous pouvons cibler l'info_block_wrapper. C' est un emballage pour nos points de vente gratuits. Je vais définir le type d'affichage pour être flex. Nous pouvons définir la direction de flexion pour être colonne sur les plus petits écrans. Donc ils sont empilés. Ensuite, l'info_block individuel. Il s'agit du wrapper pour chaque composant. Je veux donner à cela une couleur de fond, qui va avoir la valeur de f1e6da. Donc marge, donc 10 pixels en haut et en bas pour ajouter un peu d'espace dans et zéro à gauche et à droite, un peu de rembourrage à l'intérieur de la div de 10 pixels. Le numéro peut cibler les blocs d'information et l'en-tête de niveau 3. Si nous revenons au guide de commande, c'est le titre en haut de chaque bloc. Info_block, nous pouvons cibler les en-têtes de niveau 3. Tout ce que je vais faire ici, c'est définir la ligne de texte pour être au centre. Nous pouvons également cibler info_blocks_content. Ceci est la section juste en dessous du titre, serait détecter fils aussi l'image. Une fois que vous définissez cela comme un type d'affichage ou flex, afin que nous puissions aligner les éléments dans le centre. Puis enfin pour les petits écrans, je vais définir l'image info_block. Tout ce que je veux faire ici, c'est limiter la largeur à 30 pour cent. Jetons un coup d'oeil à cela dans le navigateur. Nous pouvons réduire cela à la vue plus petite. Cela semble un peu mieux sur les appareils mobiles maintenant. Si nous étirons le navigateur à la taille du bureau. Nous devons maintenant ajouter une requête média pour cibler cela. Je vais configurer la requête média cible la largeur minimale de 900 pixels. Notre écran média. Aussi la largeur minimale est de 900 pixels. Commençons par info_block. Réglage de la largeur à 100 pour cent. Info_block_wrapper, qui est le wrapper principal pour tous, exempt de tous les composants. Nous pouvons définir la direction de flexion ou remplacer la direction de flexion de la colonne à la ligne afin que ces tous s'aligne. Ensuite, si nous jetons un coup d'oeil à l'intérieur du navigateur, nous avons maintenant ces paramètres à travers la ligne en utilisant la boîte flexible. Mais nous voulons un espacement entre chacun. Pour ce faire, je vais sélectionner ce « Info_block » au milieu. On peut cibler celui-ci en utilisant le nie-enfant. Revenez au CSS et ciblez l'info_block, puis le deux-points. Nous pouvons cibler le nième enfant, qui sélectionnera n'importe lequel de ceux-ci que nous passons. Nous voulons sélectionner le deuxième qui est au milieu. Ensuite, tout ce que nous allons faire est de définir une marge à 10 pixels. Donnez une sauvegarde à ça. Maintenant, cela est ajouté un espacement de 10 pixels autour de ces composants. Ensuite, à l'intérieur de ces trois composants, nous allons avoir le texte sur la pile d'images verticalement. Nous pouvons le faire en définissant la direction de flexion pour être colonne et également les aligner au centre. Allons pour le info_block_contents. Nous pouvons définir la direction de flexion pour être dans une colonne et également aligner les éléments au centre. Sauvegardez ça. Ensuite, l'image. Je vais donner à ça une largeur maximale de 100 pour cent. L' image info_block, la largeur maximale, va restreindre à 100 pour cent. Enfin, je vais utiliser la boîte flexible pour réinitialiser l'ordre source. Ainsi, ceux-ci sont alternés en déplaçant l'image au-dessus du texte sur le deuxième enfant. Utilisons le même sélecteur que nous avons utilisé avant d'utiliser le nth-child. Nous pouvons ajouter cela. Mais cette fois, nous voulons aussi cibler l'image. Nous pouvons réinitialiser l'ordre de la source en définissant l'ordre de l'image comme négatif. Sauvegardez ça. Nos composants libres et maintenant alternés sur le plus grand écran. Si nous ramenons à la vue mobile, l' ordre source reste exactement tel qu'il était car il est défini à l'intérieur d'une requête multimédia. C' est maintenant la fin de notre section de routage. Vous pouvez voir qu'il y a beaucoup plus au routage que simplement passer d'une page à l'autre. J' espère que cette section vous a donné une bonne idée de ce qui est disponible. Dans la section suivante, nous allons passer à la gestion de la gestion à l'aide de View x. 37. Qu'est-ce que Vuex ?: Lorsque vous travaillez avec des projets Vue.js, nous pouvons gérer l'état de l'application de plusieurs façons. Lors du partage d'un état de passage entre les composants, il existe plusieurs façons d'y parvenir. Les données peuvent être transmises d'un enfant à un composant parent à l'aide d'événements personnalisés, et à partir du parent, l'enfant en passant des accessoires. Nous pouvons également améliorer cela en ajoutant un Event Bus. Cet Event Bus agit comme un magasin central unique, a dit nos états et est fondamentalement un fichier séparé contenant une instance de vue, à laquelle nous pouvons avoir notre état, et importer dans chaque composant si nécessaire. C' est une excellente solution pour les petites et moyennes applications. Mais un seul fichier comme celui-ci peut rapidement devenir vraiment volumineux et plus difficile à maintenir pour les grands projets. Cela nous amène au sujet de cette section, qui est l'UX. UX est un modèle de gestion d'état plus une bibliothèque pour gérer nos états, l'état étant essentiellement les données qui sont conservées dans nos composants. Il est idéal pour gérer de grands projets, et il est écrit par l'équipe d'appel Vue.js, donc s'intègre parfaitement dans vos projets Vue.js. Comme l'Event Bus, il agit également comme un seul stand central pour notre état, mais il présente certains avantages par rapport à l'Event Bus. Par exemple, vous autorisez à accéder à une source unique pour nos états. Nous pouvons toujours le diviser en différents fichiers sur des modules pour organiser notre code, et nous allons jeter un oeil à cela bientôt. Nous n'utilisons pas d'accessoires et d'événements avec Vue.ux. Nous utilisons différentes méthodes qui couvriront également ces méthodes dédiées, facilitant le suivi et la gestion des modifications apportées à nos états. Utilisez un Event Bus si plusieurs composants continuent apporter des modifications au décrochage à l'aide d'événements personnalisés, ces changements peuvent être difficiles à suivre. Nous ne savons peut-être pas quel composant a fait quel changement, ce qui peut causer des problèmes de mise à jour. En outre, comme nous le verrons dans cette section, non seulement Vue.ux agit comme une seule source de données pour l'état de notre application, il peut également être utilisé pour recueillir les données requises à partir d'autres sources. Nous l'utiliserons pour conserver nos états de composants avec nos données de Firebase. Cela fait de notre magasin un seul endroit pratique pour accéder à toutes les données dont nous avons besoin. Tout cela étant dit cependant, si vous construisez dans une application plus petite ou moyenne, Vue.ux n'est pas toujours la meilleure solution. Il peut souvent s'agir de l'ajouter lorsque vous le sentez nécessaire ou lorsque d'autres solutions posent des problèmes. Maintenant, nous savons ce qu'est Vue.ux, allons travailler pour l'ajouter à notre projet. 38. Installation et structure du fichier: Si vous voulez en savoir plus sur Vuex, vous pouvez vous rendre sur la page d'accueil, qui est vuex dot vuejs dot org. Mais je vais sauter directement dans la mise en place de cette configuration à l'intérieur de nos projets. Obtenir la configuration de Vuex à l'intérieur de notre application n'est pas trop difficile. Si nous allons à l'installation, tout comme quand nous installons le routeur, liens CDN disponibles si vous préférez mais puisque nous utilisons un NPM, je vais l'installer à l'intérieur du terminal. Ouvrons le code Visual Studio, veut fermer le serveur, puis installer la commande qui est npm i, puis le nom du paquet, qui est Vuex. Et puis donnez un moment à installer. Une fois cela fait, nous pouvons redémarrer le serveur de développement avec npm run serve. Nous pouvons ajouter cela à nos fichiers et dossiers. Maintenant, ils veulent dire tout de suite que Vuex n' applique pas une certaine structure à tous les fichiers et dossiers. Nous sommes libres de le gérer exactement comme nous le voulons. Il est commun nœuds ont un dossier principal pour nos états à l'intérieur du dossier source appelé magasin. Faisons ça maintenant. Allons à la source, créez un nouveau dossier, nommez ce magasin. Ensuite, à l'intérieur ici, nous avons besoin d'un fichier JavaScript principal, que je vais appeler le store dot js. Ce sera le fichier principal de notre magasin, et il peut être n'importe quel nom que vous voulez. Vous pouvez également voir communément cela appelé l'index dot js. Je vais appeler mon nouveau magasin pour le distinguer des autres fichiers d'index. Ensuite, à l'intérieur de notre dossier de magasin, nous devons importer à la fois Vue et aussi les modules Vuex, donc importer Vue depuis Vue et aussi importer Vuex depuis Vuex. Ensuite, comme lorsque nous avons installé le routeur, nous pouvons ajouter Vue dot utilisation pour rendre Vuex disponible dans tous nos fichiers ou modules. Cette section suivante devrait également être familière aussi, à partir du moment où nous avons ajouté le routeur. Nous devons ajouter un nouveau magasin Vuex, et aussi exporter ceci afin qu'il soit disponible dans nos fichiers, alors exportez const store et définissez ceci sur un nouveau magasin Vuex dot, capital S. À l'intérieur, nous passons dans un objet et c'est à l'intérieur de cet objet où nous pouvons définir n'importe quel état initial. Par exemple, si vous aviez une partie où nous avons mis à jour le score du joueur, nous pourrions ajouter une propriété d'état ici pour le score et le définir initialement à zéro. Ensuite, un ou plusieurs composants pourraient mettre à jour le score pendant le jeu. L' autre fichier que je veux ajouter est le point principal js, alors ouvrons ceci. Nous devons mettre à jour ceci dans notre fichier principal, comme nous l'avons fait avec le routeur. Nous devons d'abord importer le magasin. Il s'agit d'exporter et le chemin d'accès au fichier est une barre oblique dans le magasin. Ensuite, le nom de fichier qui est stocké aussi. Faites défiler vers le bas, nous pouvons ensuite enregistrer notre magasin à l'intérieur de notre instance de vue. Juste en dessous du routeur. Je vais ajouter ceci ici, suivi d'une virgule. Et c'est notre magasin maintenant enregistré avec Vue, retour et installer dot js. Je vais configurer les choses en ajoutant un objet d'état initial. À l'intérieur, ici. Tout l'objet d'état fonctionne un peu comme la propriété de données de vue, où nous pouvons configurer nos variables et les mettre à jour à partir de nos fichiers. Avec tout cela maintenant mis en place, je vais laisser cette vidéo ici. Comme nous passons par cette section. Il y aura beaucoup plus de fichiers et de dossiers ajoutés et le faible plus ajouté au stand. Mais pour l'instant, c'est la configuration de démarrage et enregistré pour être utilisé et va commencer à accéder aux données de notre magasin dans la prochaine vidéo. 39. État initial et accès à la boutique: Avec la configuration de notre nouveau magasin Vuex, il est temps d'ajouter un peu d'état à notre magasin et de voir comment nous pouvons y accéder depuis nos composants. Juste avant de le faire, nous avons une erreur dans la console, et c'est parce que notre Vuex a besoin d'un V majuscule pour marquer votre importation tout en haut. Nous commençons maintenant par récupérer les données de pizza de notre base de données Firebase ainsi que les commandes de nos clients. Jusqu' à ce que nous mettions en place, cependant, je vais simuler cela. Si nous passons aux composants menu.vue, ici, si nous descendons à notre propriété de données, nous avons nos exemples de données ici, qui est obtenir des éléments de menu. Je vais découper toute cette section de nos composants et ensuite déplacer ça dans notre magasin. Assurez-vous de saisir la bonne section. Obtenez des éléments de menu, en laissant seulement les paniers et aussi le texte du panier dans notre boutique. Nous pouvons maintenant coller ceci dans notre objet d'état. Ensuite, je vais juste changer le nom pour être simplement des éléments de menu. Cela signifie que nos données sont maintenant transférées vers les composants et placées l'intérieur d'un magasin central pour que n'importe quel composant puisse avoir accès. Comme prévu, si nous allons dans le navigateur et ensuite passer aux composants de menu, cliquez sur le lien de menu ici, le menu est manquant parce que nous avons supprimé les données et les avons placées dans un fichier différent. Comment accéder à ces magasins depuis l'intérieur de ces composants ? Eh bien, si nous revenons à nos composants menu.vue, nous pouvons maintenant avoir accès à notre magasin à l'intérieur de la valeur calculée. Je vais appeler ça obtenir des éléments de menu, tout comme nous l'avions avant. À l'intérieur, nous allons retourner ce point $ magasin de symboles. Ensuite, à partir de notre fichier de magasin, nous allons accéder aux objets d'état, et à l'état de pizza, que nous avons appelé les éléments de menu. Ce nom des éléments de menu get, correspond également à notre boucle. Si nous faisons défiler notre boucle, glisser au-dessus du panier, et nous voici, à l'intérieur du menu, nous avons des éléments de menu. Nous avons juste besoin d'ajouter une virgule après les valeurs calculées. Dis ça, et revenez à notre menu. Nous avons maintenant les données du menu en place. Ces données sont maintenant accessibles à partir de notre magasin central, au lieu d'être limitées à un seul composant. Lorsque les données installent des mises à jour, ce composant et tout autre, qui accède à ces données de menu seront également mis à jour ou re-rendu. Si nous faisons un changement rapide à un nom de pizza dans le store.js, descendons et changeons le nom de ceci, donne à ceci une sauvegarde, retour à notre menu. Nous voyons maintenant ces mises à jour immédiatement. Enfin, nous accédons également aux mêmes éléments de menu depuis l'écran d'administration. Allons à l'admin.vue. Nous pouvons mettre en place une valeur calculée, tout comme nous l'avons fait dans le menu. Configurez notre objet et ajoutez la virgule juste après. Le nom de nouveau va être le même des éléments de menu get et nous allons retourner notre magasin parce que accéder à ce point $ magasin de symboles, nos objets d'état, puis encore une fois, les éléments de menu. Faites défiler vers le haut. Nous pouvons maintenant l'utiliser pour créer nos données dynamiques à l'intérieur de la table de menu, mais à partir du haut, juste en dessous du titre du menu, si nous recherchons le corps de la table, nous pouvons créer une boucle V for. Nous allons faire une boucle à travers les éléments du menu get. Donc, élément dans obtenir les éléments de menu. Nous pouvons également lier une clé et la clé sera égale à l'ID point de l'élément. Maintenant, nous pouvons utiliser cet élément pour remplacer la valeur codée en dur de margarita. À l'intérieur des accolades doubles, nous pouvons accéder à l'item.name et ils devraient maintenant être répétés car il s'agit d'une boucle pour les trois articles, à l'intérieur de notre magasin. À l'administrateur. Faites défiler vers le bas jusqu'à notre menu. Maintenant, nous allons voir nos articles gratuits retirés de notre magasin central. C' est une façon d'accéder aux données de notre magasin. Ensuite, nous allons examiner un autre moyen éventuellement amélioré, qui est en utilisant des getters. 40. Améliorer l'accès à la boutique avec des getters: Dans la dernière vidéo, nous avons accédé à notre magasin central directement à l'aide d'un $store.state.menuItems, comme vous le voyez ici. Il y a une meilleure façon de le faire, cependant, et c'est en ajoutant des getters à notre magasin. Comme ce nom l'indique, nous les utilisons également pour augmenter les données de notre magasin central. Mais vous pensez peut-être déjà que nous recevons déjà des données de notre magasin. Alors pourquoi on utilise un getter ? La raison en est que vous pouvez faire beaucoup plus avec getters, lorsque nous accédons à l'état avant d'utiliser directement $store, oui nous avons obtenu les données que nous voulions revenir, mais à titre d'exemple. Et si nous voulions faire quelque chose d'un peu plus complexe, comme les ordres de faction du magasin, puis filtrer ces ordres pour montrer seulement les ordres qui sont terminés. Pour ce faire, après avoir récupéré les données, nous aurions besoin d'effectuer cette action de filtre à l'intérieur de la propriété calculée des composants. Si un seul composant voulait exécuter ce filtre. Ce n'est pas vraiment un problème. Cependant, si plusieurs composants accèdent aux mêmes données filtrées, nous aurons du code en double via notre application. Pour résoudre ce problème, nous utilisons un getter pour récupérer les données dont nous avons besoin à partir du magasin, puis effectuer toute action que nous voulons, comme un filtre ou un calcul. Ensuite, les composants recevront les données finales ou exactes dont ils ont besoin. Je pense qu'un getter est aussi simple que d'ajouter un état à notre plaie. Si nous nous dirigeons vers ce store.js, juste après nos objets d'état et faites défiler jusqu'au bas, ajoutez une virgule et configurez notre objet getters, tout comme moi notre état. Nous ajoutons ensuite le nom de notre getter et je vais appeler ceci « getMenuItems. » Cela va être une fonction qui reçoit l'état comme un argument. Nous utilisons ensuite l'État pour accéder à toute information que nous voulons. Donc, nous voulons saisir le State.MenuItems de juste au-dessus. Nous pouvons ensuite utiliser ce getMenuItems getter à l'intérieur des composants de menu, laisse la tête à là « menu.vue ». Ensuite, tout ce que nous devons faire, plutôt que d'accéder à notre état, nous allons accéder à nos objets getters et le nom était GetMenuItems. L' autre getter dont nous avons besoin est d'obtenir le nombre de commandes que nous avons. Pour cela, nous avons besoin d'un tableau de commandes à l'intérieur de notre état, alors revenez ici pour stocker, juste en bas, juste après que nos objets aient ajouté un coin. Nous allons initialement définir notre tableau de commandes pour être vide. Ceci est vide pour le moment, mais plus tard dans le cours, nous allons synchroniser cette information avec firebase, pour extraire les commandes de notre base de données. En utilisant cela, nous pouvons maintenant mettre en place un deuxième getter, appelé Nombre d'ordres. Cette mise en place comme ci-dessus. Il prend dans l'état comme un argument de notre fonction et nous pouvons accéder à state.orders. Puisque nous voulons qu'ils connaissent le nombre de commandes plutôt que le contenu, nous pouvons y accéder avec la propriété foncière. Le nombre de commandes fait partie de notre écran d'administration. Par conséquent, nous devons ajouter ceci aux composants d'administration. Allons là-bas, jusqu'à la propriété de l'ordinateur. Après avoir obtenu des éléments de menu, nous pouvons ajouter notre nombre de commandes où nous allons retourner ceci. $store.getters.numberooForders. Aussi pendant que nous sommes ici, nous pouvons également changer les éléments de menu get ci-dessus pour utiliser également le getter. Donc getters.getMenuItems. Nous pouvons maintenant utiliser un certain nombre de commandes dans nos modèles. Si nous cherchons les commandes actuelles, nous avons une valeur codée en dur de cinq. A l'intérieur des accolades doubles, nous pouvons accéder à notre nombre de commandes. Donnez ceci un save and off dans l'administrateur, rechargez le navigateur. Nous voyons maintenant que les ordres courants sont mis à zéro. Comme nous l'avons mentionné au début de cette vidéo, lorsque vous utilisez un getter, nous pouvons faire à peu près tout ce que nous voulons pour les données avant de les transmettre à nos composants. Par exemple, nous pourrions faire quelque chose de simple, comme le terrain le plus étrange plus 10, et ceci est mis à jour à l'intérieur de notre composant. Ou nous pouvons faire quelque chose de beaucoup plus complexe, comme le formatage ou la validation des données avant même qu'elles atteignent nos composants. Nous savons comment accéder à l'état depuis notre magasin. C' est le bon moment pour passer à l'examen des mutations qui changent l'état dans notre magasin. 41. Modifier l'état avec des mutations: Lorsque nous traitons de l'état jusqu'à présent dans cette section, nous avons examiné comment récupérer l'état de notre magasin central, fois directement et en utilisant des getters. Quand je veux passer à changer l'état à l'intérieur du magasin, et la bonne façon de le faire est de commettre une mutation. Les mutations changent simplement les données à l'intérieur de notre magasin. Ils fonctionnent de la même manière que lorsque nous omettons un événement. Mais plutôt que d'émettre des données à un composant, nous pouvons apporter des modifications au magasin à la place. En outre, les mutations suivent les règles de réactivité des vues. Cela signifie qu'une fois que nous utilisons une mutation pour changer les états, tous les composants qui surveillent l'état seront également mis à jour automatiquement. A l'intérieur du menu du « Panier », nous avons ce bouton « Commande », et nous avons également le tableau des commandes vides à l'intérieur de notre magasin central. Ce serait un bon cas d'utilisation pour une mutation pour pouvoir muter le magasin central en poussant le contenu de l'ordre. Lorsque nous cliquons sur le bouton de ce tableau de commandes. Tout comme les getters, nous avons mis en place nos mutations à l'intérieur du magasin. Donc, je vais ajouter ceci comme un objet séparé par une virgule. Il s'agit donc de mutations. Ensuite, nous pouvons ajouter le nom de la mutation. Cette mutation va ajouter un ordre. Donc, je vais simplement appeler ce « addorder ». La mutation accepte les états qui lui sont passés comme premier argument, tout comme quand vous vous faufilez des getters. Ensuite, nous modifions l'état comment nous le voulons à l'intérieur de cette fonction de flèche. À titre d'exemple, si nos commandes étaient un certain nombre de commandes comme celui-ci, si nous définissons ceci pour être un, nous pourrions alors définir l'état, bien que les ordres soient un de plus avec ++. Maintenant, pour appeler cette mutation, nous devons aller à nos « composants de menu » et ajouter une nouvelle méthode. Donc, nous nous dirigeons vers le « menu.view » et je vais appeler cette méthode « ajouter un nouvel ordre ». Si nous prenons un coup d'oeil pour le bouton « Passez Order » à l'intérieur de la balise d'ouverture et veut ajouter un écouteur « click » et définir le sous pour être notre méthode appelée « AddNew order » défiler vers le bas et nous pouvons créer est juste en dessous. A l'intérieur de nos méthodes, nous en avons pas mal. Donc, juste après la diminution de la quantité, nous pouvons ajouter une nouvelle commande. Donc la première chose que nous devons faire est d'accéder au magasin. Comme avant qu'on puisse faire ça avec ça. $ magasin. Nous devons ensuite valider le changement en utilisant la méthode commit. Le changement que nous engageons est le nom de la mutation que nous venons de créer dans le magasin, qui s'appelait « addorder ». Nous passons ceci sous forme de chaîne, puis après avoir ajouté l'ordre, il serait logique d'effacer le panier à l'intérieur de nos composants en définissant le panier pour être un tableau vide. Ce panier est juste au-dessus de la propriété dates, dont ce tableau juste ici. Nous devons donc l'effacer une fois que la commande a été passée. Nous pouvons le faire simplement avec this.baskets est égal à un tableau vide. Enfin, nous pouvons également ajouter un message indiquant que notre commande a été passée. Nous avons déjà une propriété date du texte du panier. Il suffit de souffler ce panier, qui nous dit actuellement que le panier est vide avant qu'un utilisateur ajoute une pizza. Tout ce que nous devons faire maintenant, c'est de changer ces données avec un nouveau message. Donc, ce texte du panier d'arrêt sera égal à « Merci, votre commande a été passée ». La prochaine chose à faire est de vérifier si la valeur des commandes à l'intérieur de notre magasin a été augmentée à chaque clic. Nous pouvons maintenant mettre cela à l'intérieur du modèle de menu. Donc je vais juste faire défiler jusqu'à la fin, et nous pouvons l'ajouter n'importe où à l'intérieur des accolades doubles afin qu'il puisse accéder à notre magasin, this.store. Nous devons accéder à l'état, aux commandes, ou à d'autres projets, et dans le menu, nous voyons la valeur d'un. Créons une nouvelle commande. Commande, nous obtiendrons la valeur de deux. Essayons un de plus et la valeur de trois. C' est le moyen le plus simple de commettre une mutation. Cependant, nous voulons améliorer cela en poussant le contenu complet du panier à notre tableau de commandes, plutôt que de simplement incrémenter le nombre. Pour ce faire, nous ajoutons ce qu'on appelle une charge utile. Une charge utile est un argument supplémentaire que nous passons par la mutation, qui contient les données que nous voulons valider. Vous pouvez considérer cela comme l'ajout d'arguments à une fonction, mais nous allons passer quelques informations supplémentaires. Nous pouvons le faire à nouveau dans la méthode « addneworder ». Faites défiler jusqu'à cela, et juste après « addorder », vous ajoutez une virgule et ensuite nous pouvons ajouter la charge utile, qui est le contenu de « this.basket ». Ensuite, dans le store.js, nous passons cette charge utile à la mutation comme un deuxième argument. Donc maintenant, au lieu d'utiliser l'état seul, nous devons entourer cela à l'intérieur des parenthèses. Passez les ordres, le nom de cette charge utile est « vers », mais bien sûr, il est préférable d'être aussi descriptif que possible sur les données que vous contiendrez. Maintenant, plutôt que d'incrémenter les ordres, nous pouvons maintenant pousser les nouveaux ordres vers le tableau. Nous pouvons ensuite utiliser la méthode push JavaScript, où nous allons pousser les commandes, et nous devons également changer cela en un tableau. Nous donne une sauvegarde et cela devrait maintenant être un travail de mutation dans. Si nous nous dirigeons vers le navigateur et dans le menu, nous voyons un tableau vide. Essayons d'ajouter quelques éléments de menu et de passer une commande, et voilà. Voilà notre margarita et notre pepperoni. Lequel des deux éléments que nous avons ajoutés ? Essayons une nouvelle. Passez la commande, et nous voyons que la troisième pizza a été ajoutée à notre gamme. Tellement génial. Nous pouvons maintenant voir que le magasin a été mis à jour avec le contenu de notre panier. Il ne semble pas trop joli pour le moment, mais cela est facilement réparé plus tard dans le cours. La chose principale pour l'instant est que vous savez maintenant comment accéder avec succès au magasin central et également y valider des modifications. 42. Qu'est-ce qu'une action ?: Jusqu' à présent, nous avons examiné l'utilisation de getters pour récupérer l'état de l'intérieur de notre magasin central. En outre, les mutations, que nous venons d'examiner, provoquent des changements dans notre stalle. Les mutations font parfaitement leur travail, mais pour avoir une chose à garder à l'esprit, mutations doivent être synchrones. Nous ne pouvons pas ajouter de code asynchrone à l'intérieur d'une mutation. Si vous n'êtes pas sûr de ce que cela signifie, avec le code synchrone, nous devons attendre la fin de la tâche avant de passer à la suivante. Nous avons une tâche asynchrone, nous n'avons pas à attendre qu'une tâche précédente se termine en premier. Ceux-ci peuvent courir les uns à côté des autres. Il est logique que les mutations s'exécutent de façon synchrone. Cependant, si plusieurs mutations se produisent en même temps, nous ne serons pas en mesure de suivre celui qui est le plus responsable de chaque changement d'états. Si nous exécutions un code asynchrone, nous ne pouvons pas dire combien de temps ce processus prendra. Par conséquent, une mutation qui a été commencée en premier peut ne pas nécessairement se terminer en premier. Avoir une mutation qui s'exécute de façon synchrone signifie qu'elle doit terminer complètement d'abord avant que les suivantes ne commencent, ce qui rend le suivi des changements plus prévisible. C' est là que les actions interviennent. actions peuvent contenir du code asynchrone et sont un peu comme des mutations. Cependant, les actions ne mutent pas directement l'état, au lieu de cela, elles commettent une mutation. Cela signifie qu'il aura besoin d'exécuter du code asynchrone, comme demander des données à partir d'un serveur. Une action sera utilisée sur une mutation. Nous pouvons utiliser des actions, qu'elles soient asynchrones ou non, et vous pouvez même garder les choses plus cohérentes en passant toujours par une action si vous préférez, donc c'est la théorie derrière les actions. Ensuite, nous mettrons cela en pratique dans notre application. 43. Configurer l'utilisateur avec des actions: Je vais maintenant configurer une action pour définir l'utilisateur connecté actuel. Cet utilisateur sera stocké à l'intérieur de nos états. Ajoutons la propriété utilisateur actuelle pour commencer. A l'intérieur du store.js, juste en dessous de notre tableau de commandes. L' utilisateur actuel, que nous allons initialement définir sur null. Cela sera initialement défini sur null jusqu'à ce qu'un utilisateur soit connecté, puis il sera remplacé par un objet contenant les détails de l'utilisateur. Je vais toujours effectuer le changement d'état comme une mutation. Mais comme nous l'avons mentionné dans la dernière vidéo, nous allons utiliser une action pour commettre cette mutation. allons d'abord configurer notre utilisateur juste souffler l'ordre d'ajout, que nous allons appeler l'UserStatus, et nous voulons passer dans les états et aussi l'utilisateur, qui sera notre charge utile passé lorsque nous commettons cette mutation. En tant que fonction flèche, cette charge utile utilisateur sera soit les détails de l'utilisateur connecté, sinon l'utilisateur sera nul. Ici, nous pouvons ajouter une instruction if pour vérifier si l'utilisateur est connecté. Si c'est vrai, nous allons mettre à jour cet état .CurrentUser avec la valeur de l'utilisateur. Si l'utilisateur se déconnecte, nous pouvons également mettre à jour l'utilisateur actuel aussi. Mais cette fois, nous voulons définir l'utilisateur pour être de retour à null. C' est une façon de configurer cela avec une instruction if... else ou alternativement, nous pouvons utiliser l'opérateur ternaire JavaScript pour vérifier si l'utilisateur est égal à null. Si c'est le cas, nous pouvons fournir une condition où nous définissons cette Date.CurrentUser pour être null. Si ce n'est pas le cas, l'alternative est de définir l'utilisateur actuel pour être égal à l'utilisateur transmis à partir de la charge utile. Quoi qu'il en soit, c'est tout à fait valide et c'est notre mutation maintenant terminée. Nous devons maintenant mettre en place l'action qui va appeler cela. Nous ajoutons la propriété actions dans ce que nous stockons. Comme nous l'avons fait avec les mutations des gouttières. Nous avons mis cela en place comme un objet. Nous pouvons appeler les mutations d'état de l'utilisateur, à la fois lors de la connexion et aussi lors de la déconnexion. Commençons par le signe en action, qui prendra en deux arguments. Cette fonction va être une synchronisation et ce premier argument que vous transmettez est l'objet contextuel, et le second est l'utilisateur. Configurez notre fonction flèche. L' objet context a une méthode commit. On peut l'utiliser en un instant pour déclencher notre mutation. Eh bien, d'abord, si nous allons dans le fichier login.vue et à nos méthodes, nous avons déjà cette fonctionnalité de connexion juste ici. Je vais transférer ça à notre magasin central. Si nous mettons tout le contenu entre la connexion, la section catch et aussi essayer de faire moins. On laisse juste ces accolades à l'extérieur. Si nous retournons à notre magasin, nous pouvons maintenant coller ceci dans notre connexion. Si nous faisons défiler vers le haut lorsque nous utilisons la méthode de connexion et de mot de passe, qui provient de firebase, nous devons transmettre l'e-mail et aussi le mot de passe. Lorsque nous appelons cette action bientôt, la charge utile de l'utilisateur contiendra l'e-mail et mot de passe donc nous devons changer cela à l'utilisateur. Il contiendra les détails de l'utilisateur. Cela va contenir nos informations d'utilisateur. Nous pouvons stocker cela à l'intérieur d'une constante appelée données utilisateur. Cela va stocker dans la valeur de retour de firebase et nous pouvons les utiliser pour valider notre mutation juste au-dessus. Maintenant, j'ai ces données utilisateur stockées avec vous revenez de firebase. Nous pouvons maintenant accéder à notre objet contextuel, ce qui nous permettra d'accéder à l'une des méthodes et propriétés de l'instance du magasin. Par exemple, nous pouvons accéder à notre état avec le context.state, ou nous pouvons accéder à l'un des getters ci-dessus, tout simplement comme ceci. Nous voulons utiliser la méthode commit, mais nous pouvons également simplifier cela en utilisant la destruction des arguments ES6. Au lieu de saisir le contexte complet, tout ce que nous voulons faire est de tirer la méthode commit, ce qui signifie que nous pourrions y accéder directement par nom. Que voulons-nous commettre exactement ? Où nous voulons valider une mutation par le nom de statut de l'utilisateur. On va passer ça comme une chaîne. Le deuxième argument sera l'information de l'utilisateur, que nous avons de retour de firebase, nous avons stockée dans les données de l'utilisateur et nous pouvons accéder à nos objets utilisateur. Nous utilisons également ce référencement FireBaseAuth ici aussi. Nous devons importer cela également en haut du fichier. Nous devons importer ceci comme une importation de nom. FireBaseAuth me laisse l'emplacement du paquet est de../puis firebase. Maintenant, je sais que cela peut sembler beaucoup de mesures à prendre juste pour mettre l'utilisateur dans notre état. Mais rappelez-vous que cette étape d'action est ajoutée, donc nous n'avons aucune restriction sur l'utilisation du code asynchrone avec cette action. Tout maintenant, la dernière chose à faire est de lui donner un essai. Nous le faisons en envoyant l'action à partir de nos composants et c'est ce que nous envisagerons de faire ensuite. 44. Répartir les actions: Dans la dernière vidéo, nous allons déplacer le code de connexion des composants login.view vers notre magasin central. Maintenant, l'action est terminée. Nous devons l'envoyer à partir de nos composants de connexion, en passant l'e-mail et le mot de passe de l'utilisateur pour que cela fonctionne. Je me dirige vers le composant login.view, puis fais défiler vers le bas jusqu'à notre méthode de connexion. La méthode d'inscription est actuellement vide et nous allons commencer à travailler sur ce sujet maintenant. Nous pouvons commencer par supprimer le mot-clé async. C' est parce que la fonction est marquée comme asynchrone dans le magasin central, puis à l'intérieur ici, nous allons commencer par créer un objet utilisateur qui va stocker notre e-mail et mot de passe. Nous allons configurer l'e-mail à partir de la propriété data, laquelle vous pouvez accéder avec l'e-mail de magasin et également le mot de passe est également disponible à partir de la propriété data. La prochaine chose à faire juste après notre objet utilisateur est d'envoyer en action, en passant les détails comme une charge utile. Alors accédez à notre magasin que nous allons importer dans une minute. Nous devons alors appeler la méthode d'expédition, qui va prendre dans le nom de l'action. Le nom de l'action est SignIn, puis nous passons la charge utile qui est notre objet utilisateur. C' est assez bien que nous n'ayons plus besoin de notre référence firebase, puisque vous l'avez déplacé dans un fichier différent. Mettre en place, nous devons importer notre magasin. Le chemin d'accès du fichier sous forme de chaîne est../. Nous devons aller dans notre magasin, et le nom du fichier est notre magasin. Maintenant, nous devons vérifier que c'est le travail en affichant la valeur de CurrentUser dans notre application. Rappelez-vous que CurrentUser était le nom d'un morceau d'état, que nous avons défini dans le store.js. Ceci est un CurrentUser qui est défini sur null par défaut et nous savons plus tôt dans la section, que pour obtenir le contenu de nos états. Nous devons utiliser des getters. Définissons le serveur pour notre CurrentUser. À l'intérieur du getter se trouvent des objets séparés par une virgule. Je vais appeler cela le CurrenUser et passer notre fonction, qui saisit le CurrentUser de l'état. Maintenant, nous aurons notre getter. Je vais ajouter ceci à une propriété ordinateur de dans les composants admin.view, donc faites défiler vers le bas jusqu'à JavaScript. Vous pouvez maintenant ajouter ceci à l'intérieur de la section calculée. Nom de CurrentUser. Nous allons retourner la valeur, qui est à partir de ceci. $store, accédez à l'objet getters et au CurrentUser. Ensuite, à l'intérieur de notre modèle, nous pouvons sortir la valeur n'importe où dans notre code comme un test. Je vais aller à la connexion en tant que section, et juste sortir ceci à l'intérieur des accolades doubles. Voir ce contexte fonctionne en se connectant et en voyant nos objets utilisateur. Allons à notre administrateur où nous pouvons nous connecter. Faites défiler vers le bas, nous ne sommes actuellement pas connectés en tant que personne. Connectez-vous, en utilisant notre e-mail et notre mot de passe qui ont été configurés dans une Firebase, connectez-vous. Maintenant, si nous faisons défiler vers le haut, nous voyons tous les détails utilisateur qui sont conservés pour notre CurrentUser dans une base de feu, mais nous n'avons pas besoin de toutes ces informations à l'intérieur de notre application. Je vais filtrer cette information d'utilisation vers le bas pour afficher uniquement l'e-mail de l'utilisateur connecté en cours. Nous pouvons voir à l'intérieur de cet objet il y a une clé e-mail à l'intérieur ici et pour seulement retourner cette adresse e-mail, nous pouvons faire un petit changement à notre mutation à l'intérieur de notre store.js. Tout ce que vous aurez à faire est de définir le CurrentUser à l'intérieur de l'UserStatus. Nous allons définir le CurrentUser pour être égal à user.email. Cela va récupérer l'adresse e-mail des objets utilisateur. Allons vers le bas et connectez-vous une fois de plus, cliquez sur « Se connecter », faites défiler vers le haut, et maintenant nous avons juste l'adresse e-mail connectée. Nous devons également passer sur la méthode de déconnexion dans le magasin aussi, à l'intérieur de l'admin.view où nous avons notre méthode de déconnexion. Nous pouvons découper le contenu et le déplacer dans notre magasin. Donc, déconnectez-vous, décrivez tout le contenu. Nous pouvons prendre cela à notre store.js, qui va être une action. Nous pouvons ajouter cela à bourrer le signIn, donc séparé par une virgule, ceci est appelé signOut, que je vais ajouter en tant que fonction asynchrone. Encore une fois, nous pouvons détruire notre méthode de commit et configurer le reste de notre fonction, puis coller dans le contenu. Utilisera à nouveau cette action pour valider la méthode d'état de l'utilisateur et puisque nous nous déconnectons, nous voulons que l'utilisateur soit nul. Donc juste après la section de coupe, nous allons valider le nom de notre mutation, qui est le UserStatus, et définir la charge utile sur null. Donc maintenant, nous avons notre action SignOut tout maintenant configuré, nous pouvons maintenant envoyer cela dans le admin.view. Allons à notre méthode d'inscription où nous pourrions le contenu avant. A l'intérieur, nous allons accéder à l'étoile qui va importer dans un instant. On peut appeler l'expédition. Sur le nom de l'action que nous voulons envoyer est SignOut. Nous pouvons alors remplacer notre impulsion firebase juste au-dessus par notre magasin et le chemin du fichier est../. Nous pouvons accéder au dossier de magasin, puis au fichier de magasin. Enregistrez ceci sous dans les projets. Nous ne voyons aucun détail, alors connectons-nous. Faites défiler vers le haut et nous avons l'e-mail de l'utilisateur connecté, cliquez sur « Se déconnecter ». Nous voyons maintenant ces déplace l'e-mail de l'utilisateur à partir de l'écran. Donc notre méthode d'inscription est maintenant toujours un travail dans, mais cette fois il est placé dans notre magasin central. Nous progressons bien avec Vue X et notre projet. Vue X peut sembler un peu déroutant au début. C' est juste quelque chose qui devient plus clair avec la pratique. Vous avez déjà vu la plupart des concepts de base de Vue X. n'y a donc pas beaucoup de plus à apprendre. Beaucoup de ce que nous couvrons pour le reste de cette section est axé sur la simplification de notre code et le rendre plus organisé. 45. Cartographie des getters: Nous savons maintenant comment utiliser les getters pour accéder à l'état de notre décrochage. Nous ajoutons ensuite ces getters en tant que propriétés calculées comme ici à l'intérieur des composants admin, pour nous permettre de les garder à jour si l'état change. Cela fonctionne complètement bien, mais il y a un moyen de simplifier ce code, qui sera utile si nous avons beaucoup plus de getters que vous voulez configurer. Nous pouvons le faire en utilisant MapGetters, qui est une aide fournie par Vuex. Pour l'utiliser, nous devons d'abord importer ceci à partir de notre bibliothèque Vuex. En haut de nos scripts, nous pouvons importer en tant que MapGetters d'importation nommé, qui est à partir du module vuex donc nous n'avons pas besoin du chemin du fichier. Nous pouvons ensuite ajouter MapGetters à nos objets de propriétés calculées. À l'intérieur, nous pouvons utiliser les trois points, qui est l'opérateur de propagation ES6, qui nous permet de mélanger ces getters avec toutes les propriétés informatiques existantes que vous avez peut-être déjà. MapGetters prend dans un tableau dans lequel nous ajoutons les noms des getters que vous voulez utiliser. Les getters que vous voulez utiliser sont simplement listés ci-dessous. Nous avons ; obtenir des éléments de menu qui ont été ajoutés comme une chaîne séparée par une virgule, nous avons aussi un nombre de commandes et le troisième est l'utilisateur actuel. Maintenant, nous pouvons supprimer les propriétés calculées existantes. Donnez ceci pour enregistrer et aller sur le navigateur. On peut tester si ça marche bien. Faites défiler vers le bas jusqu'à notre menu. Nous avons les éléments de menu, donc obtenir les éléments de menu fonctionne toujours. Nous pouvons tester l'utilisateur actuel fonctionne aussi en se connectant. Faites défiler vers le haut et nous voyons l'e-mail juste là, ce qui signifie que tout fonctionne maintenant bien. n'y a pas si longtemps, nous avions l'habitude d'obtenir un message d'erreur lors de l'utilisation de l'opérateur de propagation et nous avions besoin d'ajouter un plugin Babel supplémentaire. Ce n'est plus le cas avec la dernière version de l'interface de ligne de commande Vue. Pour terminer cela maintenant, nous pouvons revenir à Visual Studio Code, et répéter cela dans les composants de menu. Nous pouvons importer l'assistant de Vuex en haut de notre script, qui était MapGetters de vuex et faire défiler vers le bas jusqu'à notre calcul de son action. Nous pourrions supprimer les éléments de menu get, et le remplacer par MapGetters. Rappelez-vous que cela prend dans un tableau et le nom de la chaîne était obtenir les éléments de menu. Nous pouvons également ajouter plus de getters à l'avenir si nous le voulons, mais pour l'instant, sauvegardons ceci et passons au menu. Cliquez sur le lien de menu, et notre menu fonctionne toujours. Si comme moi, vous étiez actuellement vu un tableau vide à l'intérieur des paniers, quand il est vide, nous pouvons également supprimer ce code d'auparavant. Si vous allez sur le menu.view, nous pouvons faire défiler jusqu'à notre modèle, et ne va pas supprimer ceci juste en dessous de notre texte de panier où je vais le mettre. état. ordres. Je devrais supprimer ceci, et notre panier est maintenant mis à jour. En utilisant l'aide MapGetters, c'est un moyen utile d'organiser notre code et les avantages deviennent encore plus grands que nous ajoutons plus de getters à notre application. 46. Diviser notre boutique en fichiers séparés: Avoir tous nos états, fois de l'application et de sources externes, comme Firebase à l'intérieur de notre magasin central unique peut être pratique. En outre, comme vous vous y attendez, il peut devenir assez bondé à mesure que notre application se développe avec toutes les actions, mutations et getters au même endroit. Heureusement, Vuex ne limite pas la façon dont nous structurons notre magasin. Nous pouvons le diviser en plusieurs fichiers pour rendre notre code plus organisé et maintenable. Dans cette vidéo et aussi la suivante, je vais vous montrer quelques façons différentes d'organiser votre magasin et aussi comment utiliser les modules. Bien sûr, vous pouvez également trouver votre propre façon préférée aussi. La première façon dont je vais couvrir est la division de nos actions, getters et mutations dans leurs propres fichiers séparés. Ces trois nouveaux fichiers seront également présents dans le dossier du magasin. Allons à notre magasin à l'intérieur de la barre latérale. Et nous pouvons créer un nouveau fichier pour chacun d'entre eux. Le premier est actions.js, le suivant est pour le getters.js, et le troisième est pour les mutations. Je vais commencer par citer nos actions du fichier store.js principal, puis les coller à l'intérieur de notre nouveau fichier d'actions. Donc, à l'intérieur ici, regardons nos actions et nous pouvons tout enlever à l'intérieur de l'orthèse bouclée environnante. Je me déconnecterai et je me connecterai, laissant juste les accolades autour de ça. Sortez-les, puis dirigez-vous vers le actions.js. Nous pouvons les coller dans, et nous devons également les exporter comme une constante. Nous pouvons donc les importer à l'intérieur de notre magasin principal. Donc, le premier de connexion, nous pouvons exporter ceci comme une constante. Comme il ne fait plus partie de l'objet de la méthode, nous devons également le transformer en une fonction autonome. Nous pouvons ajouter un égal après le nom de la fonction. Nous pouvons répéter cela aussi pour le signe juste en dessous. Donc, exportez const, remplacez les deux-points par les égaux. Nous devons également importer notre FireBaseAuth, en haut de la page. Il s'agit d'un export de nom. Donc FireBaseAuth et ceci provient du chemin du fichier de barre oblique point, puis firebase. Si nous faisons défiler vers le bas, puisque ces fonctions aussi maintenant autonomes, nous avons juste besoin de supprimer la virgule séparant de la connexion et de la déconnexion. Nous pouvons faire exactement la même chose si vous avez plus d'actions, et nous ajouterons d'autres actions dans ce projet plus tard. Pour l'instant, cependant, nous devons importer cela dans notre store.js, où nous les supprimons simplement de. Commençons par le haut. Nous pouvons supprimer nos importations de firebase, et au lieu de cela nous pourrions remplacer cela par une étoile, nous utilisons pour importer l'intégralité du contenu de notre nouveau fichier plutôt qu'un seul membre. Cela va importer toutes nos actions à partir de notre fichier d'actions. Ce nom d'actions est à nous, mais c'est simplement le nom que nous utilisons pour faire référence à l'objet importé. Certaines actions ont du sens. Ceci est dans le même dossier, donc il suffit de pointer la barre oblique, puis les actions. Nous pouvons ensuite descendre au bas du fichier où nous avons notre objet actions. Nous pouvons enlever le deux-points et les accolades, laissant une référence aux actions que nous venons d'importer. Nous pouvons maintenant tester que cette action fonctionne toujours en se connectant et en se déconnectant. Donc, nous voyons toujours l'e-mail de l'utilisateur dans l'admin. Passons à l'administration barre oblique, faites défiler vers le bas, connectez-vous. Appuyez sur le bouton « Se connecter ». Ensuite, si nous faisons défiler vers le haut, nous voyons l'e-mail de l'utilisateur connecté. Cliquez sur « Se déconnecter » et les deux fonctions de fichier semblent maintenant fonctionner. Donc nous avons juste besoin de faire exactement la même chose pour nos getters et nos mutations. C' est certainement un défi que je pense que vous pouvez faire tout seul. Il suffit de suivre le même processus, en déplaçant les mutations et les getters dans leur propre fichier, comme nous l'avons fait avec les actions. Donc, mettez la vidéo en pause et donnez-la un coup d'envoi si vous vous sentez confiant de le faire. Je vais recommencer dans les getters. Dirigez-vous vers le fichier store.js. Nous pouvons saisir les trois getters, sur notre nouveau fichier, les coller dans, exporter const, tous les trois. Rappelez-vous, puisque ce sont maintenant des fonctions autonomes, nous devons remplacer le deux-points par un égal, car ceux-ci ne font plus partie d'un objet. Nous devons également supprimer les virgules séparant chacune et ensuite nous pouvons les importer dans notre store.js. Tout comme avant, nous pouvons supprimer l'objet pointant vers une référence getters, que nous pouvons maintenant importer tout en haut, remplacer les getters, puis la même chose pour les mutations. Ici, nous avons l'AddOrder et l'UserStatus. Supprimons ces deux. Nous pouvons également supprimer un objet pendant que nous sommes ici dans le nouveau fichier de mutations. Ajoutez-les dans, exportez const, ajoutez les égaux. Également la même chose pour le second, ajoutez les égaux dans et supprimez également la virgule. Si vous avez toujours un code commenté, nous pouvons également le supprimer. Ce n'est plus nécessaire. Retournez à notre magasin. On peut importer ça. C' était les mutations. Modifiez également le chemin d'accès du fichier. Donc c'est ça. Maintenant donne à cela un « Enregistrer » et aller sur les projets. Tout fonctionne toujours comme normal. Essayons l'administrateur. Tout a l'air bien. C' est donc juste une façon de structurer notre code Vuex. Eh bien, vous pouvez déjà voir comment cela pourrait nous bénéficier au fur et à mesure que l'application se développe. Ensuite, nous allons couvrir les modules, ce qui est une autre façon utile d'organiser le code à l'intérieur de notre boutique Vuex. 47. Utiliser des modules: Vuex nous permet également d'organiser notre code en modules. Nous avons découvert la séparation de nos actions, getters, nos mutations dans nos propres fichiers, ce qui était une amélioration. Mais nous pouvons améliorer encore plus les choses en regroupant les fonctionnalités associées. Par exemple, tout ce qui se trouve actuellement dans notre magasin peut être divisé en trois groupes. Il est même lié à notre menu, aux commandes ou à nos utilisateurs. Ainsi, nous pouvons organiser notre code dans ces modules gratuits. Je vais le faire dans le dossier de style. A l'intérieur, nous pouvons créer un dossier de modules, pour stocker nos nouveaux fichiers gratuits. Cela va aussi être des fichiers JavaScript. Donc, le premier est pour la fonctionnalité du menu. Toujours à l'intérieur des modules, nous créons le orders.js, et enfin les utilisateurs. Assurez-vous que tous ces imbriqués à l'intérieur du dossier des nouveaux modules, puis nous pouvons commencer avec notre menu. A l'intérieur d'ici, nous pouvons ajouter tous les getters d'état, mutations et actions qui sont liés à notre menu et les stocker à l'intérieur d'une constante. Ainsi, nous pouvons configurer l'état en tant qu'objets. On peut faire nos getters, les mutations. Puis enfin, les actions. Je vais commencer dans ce fichier en ajoutant nos éléments de menu à partir d'états, que nous avons actuellement un joli tall.js. A l'intérieur, l'état a nos éléments de menu, qui est un objet. Localisons l'orthèse bouclée de fermeture. Je dois tout déplacer ici. Laisser les commandes sont et aussi l'utilisateur actuel. Collez ces dedans dans notre menu.js à l'intérieur de nos objets états. Il y avait deux morceaux d'état dans notre magasin sont liés aux commandes et à l'utilisateur. Donc, ajoutez-les au propre module bientôt. Ensuite, je vais attraper les éléments de menu get, qui est un getter de notre fichier guesses.js. Coupons encore cette ligne. Plus de deux sont liés aux plus de deux modules. On peut prendre le premier. Descendez vers les getters est face à cela dans. Cette fonction est également maintenant sur notre objet getters deux. Nous devons revenir à une méthode en changeant égal à deux points. La virgule peut également supprimer la x-box. Nous n'avons pas de mutations à ajouter, et nous ajouterons quelques actions à ce fichier plus tard. Lorsque x doit exporter toutes ces constantes, afin que nous puissions les utiliser dans nos fichiers. Nous avons nos états, nous avons nos getters, nos mutations et nos actions. Donc, nous ne pouvons pas exporter par défaut, un objet qui contiendra ces quatre variables. Donc état, mutations, getters, et enfin, les actions. Comme dans la dernière vidéo, je vous encourage à compléter les commandes sur les modules de l'utilisateur par lui-même. C' est important si tu gâches les choses. Je vais aller de l'avant jusqu'à maintenant. Nous pouvons toujours comparer le code à la fin. Rappelez-vous deux pour chaque copie fonctionnelle dans nos modules, nous devons remplacer les égaux par un deux-points, comme nous l'avons regardé ici. Passons maintenant aux ordres. Ce nouveau module. Nous pouvons créer une constante d'états. Nous pouvons créer nos mutations, les getters, les actions, puis enfin exporter les valeurs par défaut des objets pour ces quatre variables. Sans fil est vide, juste changé ceci. Je vais sélectionner tout et copier et coller cela à l'intérieur du users.js. Ensuite, nous pouvons commencer à travailler avec nos ordres. Tout d'abord, à l'intérieur des états, nous pouvons saisir n'importe quel état lié aux commandes du store.js. Nos commandes sont initialisées en tant que tableau vide. Supprimons ça, c'est des inter-états. Nous avons des mutations ou mutations dossier, qui est notre ajout à l'ordre. Retirer cette base est la même, n'oubliez pas de supprimer les exportations et aussi définir ce nouveau pour être un deux-points. Nous avons aussi un getter, qui est le nombre de commandes. Retirez ceci et collez-le dans notre module. Nous n'avons actuellement aucune action. Donc, pour l'instant, nous pouvons enregistrer ce fichier et aussi les getters. Nous pouvons commencer à travailler sur le module users.js. Le tout haut de l'état que nous avons l'utilisateur actuel que vous pouvez récupérer de notre stand, qui est actuellement mis à connaître. Nous pouvons ajouter cette fin étape suivante pour les mutations, nous avons le statut de l'utilisateur. Le mutations.js, saisissez tout le contenu et collez-le dans un objet mural, supprimez notre exportation, installation, nos deux-points, et vers le bas à nos getters. Il y a un getters dont nous avons besoin pour ce fichier, et c'est pour obtenir l'utilisateur actuel de notre fichier getters.js. Supprimons cela, supprimons nos exportations et les deux-points, et jusqu'aux actions pour les actions liées à l'utilisateur, nous avons la méthode de connexion. Prenons ceci de notre actions.js. Nous pouvons également saisir le panneau pendant que nous sommes ici aussi. Prenons ces deux phases dedans. Donc, je vais utiliser le module comme jamais. Nous pouvons supprimer les exportations à un deux-points. Nous devrons également séparer ces deux par une virgule. La même conception dans, cette action utilise également la firebase off. Nous devons saisir cela également de notre fichier d'actions et l'ajouter dans notre module utilisateurs. Assurez-vous que tous nos fichiers sont maintenant enregistrés. Je connais le fichier Thom Mayne store.js. Nous devons maintenant importer nos nouveaux modules gratuits. Nous pouvons également supprimer nos getters, mutations et actions. Je vais importer nos nombreux modules à partir du chemin de fichier ./ dans le dossier des modules et le menu. C' est notre décision de plus de fois. Celui-ci est pour les commandes, les deux /orders. Ensuite, le dernier était pour les utilisateurs, faites défiler vers le bas jusqu'à nos objets de magasin. Nous pouvons supprimer nos états. En fait, nous pouvons tout supprimer de l'intérieur ici et ensuite les remplacer par nos modules, qui est un objet, mais nous allons passer dans les commandes de menu et aussi les utilisateurs. Aussi juste pour nettoyer les choses, je vais supprimer nos actions, nos getters, nos fichiers de mutations. Nous n'en avons plus besoin dans nos projets. Mais vous pouvez en avoir besoin pour référence si vous préférez. En fait, il peut être préférable de les utiliser pour état non lié qui n'appartient pas à un module de son propre. Maintenant, sauvegardons ce fichier et dirigeons vers notre application. Combien cela a changé le chemin d'accès du fichier. Je vais utiliser ce fichier, qui signifie juste des changements à un double../sur les projets. Testez les éléments de menu pour commencer. Tous ces éléments sont affichés sur l'écran. Nous pouvons essayer de vous connecter. L' administrateur vers le bas où nous pouvons ajouter notre email et mot de passe. Nous pouvons toujours nous connecter et nous déconnecter. Cela semble toujours fonctionner, mais cette fois en utilisant des modules. Nous reviendrons également à ces modules dans la section suivante et les ajouterons à mesure que nous apprenons à conserver les données d'un magasin en synchronisation avec Firebase. 48. Relier Vuex à Firebase: Je vais commencer cette section en ajoutant des liaisons Firebase à Vuex. Maintenant que Vuex a été ajouté à notre application, nous avons maintenant un emplacement centralisé pour toutes nos données et notre état. Dans cette section, nous allons également lier notre porte Vuex à Firebase. Bien que Vuex soit un emplacement central pratique pour pousser et récupérer nos données, il ne s'agit pas d'un magasin de données persistant. Cela signifie que si nous rechargeons l'application, toutes les modifications apportées au magasin sont alors perdues. Pour résoudre ce problème et m'assurer que nos menus et commandes sont stockés de façon permanente, je vais garder la boutique Vuex en synchronisation avec Firebase. Nous allons le faire avec un paquet appelé Vuexfire, et ce paquet est maintenu par l'équipe d'appel VJS, et il permettra à notre magasin Vuex central d'être synchronisé avec nos données Firebase. Il le fait en écoutant notre base de données Firebase , puis en communiquant des mutations pour changer notre état pour qu'il corresponde. Pour le moment, si nous allons à l'intérieur de notre administrateur, nous pouvons ajouter une nouvelle pizza ici. Nous pouvons ajouter ceci, et nous pouvons voir que cela n'est pas ajouté à notre menu, ou si nous passons aux composants de menu, nous ne voyons pas cela ajouté là non plus. C' est parce que si nous passons à nos modules de magasin. Alors allons dans le menu.js, puis jusqu'à notre état. Ici, nous avons juste nos données factices. Donc, maintenant sera un bon moment pour supprimer cela et remplacer cela par un tableau vide. Donc, je vais supprimer tout le contenu de l'intérieur de nos états, nous pouvons laisser le nom des éléments de menu, mais cette fois je vais définir cela égal à un tableau vide. Cela sera bientôt synchronisé avec Firebase. Donc, toutes les données que nous avons à l'intérieur de notre base de données seront ensuite reflétées dans l'état. Ce qui signifie que nous pouvons toujours utiliser notre get menu items getter pour saisir notre état et le pousser à nos composants. Alors maintenant, installons le paquet dont nous avons besoin, qui s'appelle Vuexfire. Je vais le faire via npm, avec la commande i sur le nom du paquet est Vuexfire, et cela devrait prendre quelques instants à installer. Super, avec cela maintenant, nous pouvons vérifier que cela est installé à l'intérieur du package.json, nous pouvons aller jusqu'aux dépendances et recevoir Vuexfire est installé ici, et l'étape suivante consiste à ajouter nos mutations Firebase. Il est ajouté au magasin racine et ces mutations, nous devons muter notre état chaque fois que les données à l'intérieur de la Firebase changent. Alors passons à la racine store.js à l'intérieur de notre dossier de décrochage. Je vais probablement parler, nous devons d'abord les importer de Vuexfire. Cela va être nommé import. Donc, à l'intérieur des accolades, mutations Vuexfire, sur le paquet est Vuexfire. Cela nous permettra alors d'injecter ces mutations dans la racine de notre magasin. Nous pouvons donc ajouter les mutations avec le nom correspondant d'en haut. Maintenant, j'ai ceci, la prochaine étape est de renforcer nos actions. Cela prend nos actions normales que nous avons dans notre magasin, puis ajouter quelques paramètres supplémentaires pour lier ou délier notre état à une référence Firebase. Donc, dans notre cas, nous avons combiné notre menu Firebase et la collection la plus ancienne, et nous allons regarder comment le faire maintenant. Réglons cela dans le module de menu, d'abord, nous devons importer l'action Firebase, tout comme nous venons de le faire avec les mutations Firebase tout en haut. Ok, ceci est nommé export, donc nous ajoutons ceci à l'intérieur des accolades, le nom est l'action Firebase. Encore une fois, à partir de notre paquet Vuexfire, nous allons également traiter de notre référence de menu, sorte que nous pouvons également importer cela à partir de notre propre fichier Firebase. Il s'appellera le menu DB ref. Le chemin d'accès du fichier est point, barre oblique de point, point, barre oblique et le nom de fichier de Firebase. Donc maintenant à l'intérieur de ce module de menu, nous avons déjà nos actions objets configurés. À l'intérieur, nous allons utiliser l'action de firestorm que nous venons d'importer, plutôt que d'utiliser une action régulière. Cela va envelopper notre action afin que nous puissions utiliser Vuexfire pour garder nos données en synchronisation avec Firebase, et je vais appeler ce nouveau menu jeu d'actions ref. Nous pouvons ensuite accéder à l'action cinq étoiles, que nous venons d'importer, installer l'action prend également dans nos objets de contexte comme une action régulière le fait, mais comme nous l'avons mentionné précédemment, elle l'améliore également avec de nouvelles fonctions pour aider à le lier à Firebase. Définissons cela comme une fonction. La première chose à faire à l'intérieur de notre corps de fonction est de retourner le contexte, puis accéder à l'une des fonctions supplémentaires fournies appelées bind fire store ref. Mais que voulons-nous exactement lier à Firebase ? Si nous faisons défiler vers le haut, nous avons déjà à l'intérieur de ce fichier conduire deux choses que nous voulons lier. Nous avons une référence à notre base de données qui pointe vers notre collection de menus à l'intérieur de nos états. Juste en dessous, nous avons nos plats de menu locaux. Ce sont donc les deux références que vous voulez garder synchronisées. Nous les combinons et nous assurons que les données sont exactement les mêmes. Donc, tout d'abord, passons dans notre état des éléments de menu. Et puis le deuxième argument va être notre db menu ref. Si nous passons maintenant à notre application, qui a déterminé avec cela, cela a été automatiquement ajouté par l'éditeur de texte. Donc, cela doit juste être une action viable, retour à l'application, vous voyez que nous avons maintenant perdu nos éléments de menu. C' est parce qu'il nous manque une chose importante. Nous avons créé notre action dans le module, mais nous ne l'avons pas réellement distribuée. Cette action particulière ne change pas notre état, plutôt, elle se lie à Firebase à la place. Par conséquent, nous voulons l'envoyer dès le chargement de l'application. Un bon endroit pour le faire serait à l'intérieur du hook créé dans le fichier app.view principal. Passons à l'app.view et descendons à notre script. Nous pouvons ajouter le crochet créé juste après nos composants. Nous envoyons ceci comme pour n'importe quelle action, nous pouvons accéder à cet envoi de points d'étoiles. La première chose est de passer une action facile qui est nommé menu réf. Le deuxième argument est la charge utile, qui est DB menu ref, qui pointe vers la collecte de menus dans notre base de données. Maintenant, nous avons inclus la référence du menu DB, nous devons également importer ceci en haut de nos scripts à partir de notre fichier Firebase, qui est situé à point slash, puis Firebase. Soudain, à l'intérieur du crochet créé, nous allons envoyer l'action une fois l'application créée. Cela permettra de s'assurer que notre magasin est lié à Firebase tout de suite. Maintenant, j'espère que si nous sauvegardons ce fichier et ensuite nous dirigeons vers notre projet, nous voyons maintenant à l'intérieur du menu nous avons notre pizza pepperoni, qui est maintenant extrait de notre base de données. Allons aux routes d'administration. Nous pouvons vérifier que cela est affiché correctement à l'intérieur ici aussi. On voit aussi la pizza pepperoni ici. Essayons d'en ajouter un de plus. Nous pouvons ajouter ceci avec une donnée par défaut. Maintenant, voir la margarita a été poussé dans notre base de données et également reflété dans notre menu. C' est donc vraiment un bon progrès et quelque chose qui est vraiment important pour notre application. Ensuite, nous allons également faire la même chose avec nos commandes et les synchroniser avec Firebase. 49. Synchroniser les commandes avec Firebase: Bien que nous soyons sur le thème de la synchronisation de nos éléments de menu avec Firebase, nous pouvons également faire de même avec nos commandes. Pour commencer, je vais me diriger vers le fichier de configuration Firebase, qui est un firebase.js. Nous avons déjà une référence de base de données à notre menu. Nous devons aussi faire la même chose pour notre commande. Je vais dupliquer ceci et changer la référence DBorders, que nous allons pointer vers notre collection de commandes. Rappelez-vous, il est normal que nous n'ayons pas encore un objet nommé ordres dans la Firebase. La première fois que nous poussons une nouvelle commande, elle sera créée pour nous. Ensuite, nous pouvons passer aux composants app.vue. Ensuite, à l'intérieur ici, nous devons également importer cette référence. Nous avons la référence du menu, donc nous pouvons également saisir notre nouvelle référence de commande. Ensuite, en faisant défiler vers le bas à l'intérieur du crochet créatif, nous pouvons dupliquer cela et faire la même chose pour nos commandes. Cela va garder en synchronisation notre référence de commande, qui va créer dans un instant avec notre référence de Firebase. Cette référence d'ordres d'ensemble est une action que nous n'avons pas créée, alors passons et faisons ceci maintenant. Cela va être similaire à définir le menu ref, que nous avons créé dans la dernière vidéo. Copions ceci à partir de notre menu. Menu est à l'intérieur des modules. Prenez ceci à partir des actions et ensuite nous pouvons passer à notre orders.Js coller ceci comme une action, et tout ce que nous devons faire est de changer toute référence de notre menu pour être des commandes. Le nom, les ordres ref, c'est simplement des ordres, qui est le nom de notre état juste au-dessus, qui est dit être un tableau vide. N' oubliez pas que pour que cela fonctionne, nous devons également importer notre action Firebase et notre référence de commandes. On peut aller en haut du dossier au-dessus de nos états. Importons d'abord notre action Firestore de notre paquet, qui est vuexfire. Deuxièmement, nous allons importer notre DBordersRef, que nous venons de créer dans notre fichier Firebase. donc.. /firebase. Tout comme avec le menu, cela va ajouter une action, qui lie nos commandes, qui est le nom de notre état à l'intérieur de ce module avec tous nos ordersRef, qui pointe vers notre collection à l'intérieur de Firebase. Avec cela maintenant en place, nous pouvons configurer un getter juste en dessous, qui va retirer nos commandes de Firebase. Je vais appeler ça GetOrders. Cela va prendre dans nos états à l'intérieur de notre fonction et ensuite retourner notre état les ordres. Vous pouvez commencer à voir un modèle ici car beaucoup de ce que nous faisons est juste la même que nous l'avons fait pour les éléments de menu. Nous mettons en place une liaison entre local, état et Firebase, puis créons un getter pour récupérer ces données, que vous pouvez utiliser à l'intérieur de nos composants. Nous utiliserons ce getter dans la prochaine vidéo pour afficher nos commandes à l'intérieur de l'administrateur. 50. Afficher les commandes dans la section administration: Nous avons maintenant nos ensembles de liaisons Firebase de nos commandes, où nous avons créé notre ancienne référence à l'intérieur de nos actions. Nous avons également créé un getter pour extraire nos articles de l'état. Utilisons maintenant ce getter à l'intérieur du composant admin pour afficher les commandes et aussi pour changer notre panier d'achat pour pousser de nouvelles commandes à Firebase plutôt que directement à tout afficher Expo. Je vais commencer par pousser ces commandes à Firebase à l'intérieur des composants de vue point de menu. En bas tout en bas. À l'intérieur de toutes les méthodes, nous avons AddNeworder, qui est actuellement en train de commettre une nouvelle mutation appelée AddOrder. A l'intérieur des commandes, c'est la mutation AddOrder et cela pousse directement dans notre magasin. Je vais maintenant commenter cela et en place, je vais ajouter une nouvelle action en bas, qui va plutôt pousser nos nouvelles commandes Firebase. Cette action va s'appeler AddNeworder, et c'est d'être responsable de pousser nos nouvelles commandes à Firebase. Je vais marquer cela comme asynchrone, donc nous pouvons utiliser un poids à l'intérieur de notre code. Nous pouvons passer dans n'importe quel contexte et aussi l'ordre qui va être la charge utile transmise à cette action. Nous pouvons configurer notre fonction avec une section try and catch pour toute gestion des erreurs. En prenant l'erreur, et pour toute erreur, nous allons transmettre une alerte avec la chaîne : « Désolé, il y a eu un problème lors du passage de votre commande, veuillez réessayer. » La transaction va être assez simple, tout ce que nous devons faire est d'accéder à notre DBorderReference, puis appeler la méthode add, qui va pousser la charge utile de l'ordre. Nous allons y arriver et c'est maintenant notre action terminée. Remarquez à l'intérieur de cette action que nous ne commettons pas de mutation, puisque nous n'avons pas besoin de mettre à jour notre propre magasin. Au lieu de cela [inaudible] va gérer l'extraction de nos données à partir de Firebase, qui mettra alors trop à jour notre état local. Nous pouvons maintenant appeler cette action à partir de nos composants de menu lors de la passation d'une nouvelle commande. Tout d'abord, je vais créer une nouvelle constante qui va contenir nos données d'audit en tant qu'objet, nous pouvons passer dans le trouble AP, qui est les pizzas contenues dans notre commande, nous pouvons saisir de cette panier de magasin. Cependant, pour le moment cela nous causerait un problème, notre panier est un type de tableau à l'intérieur de la propriété data. Cependant, Firebase attend un objet, donc nous devons convertir ce panier en un type d'objets en ajoutant les accolades. Ensuite, nous pouvons utiliser les trois points, qui est l'opérateur de propagation, et cela va fusionner dans les éléments du tableau dans nos objets. En outre, je vais ajouter une propriété CreateDAT, qui sera égale à une nouvelle date JavaScript. Ce qui va nous permettre de récupérer nos ordres dans l'ordre de date, nous ne commettons plus de mutation, donc je vais le commenter. Je vais maintenant envoyer notre nouvelle action et aller accéder à ces stockés directement, résoudre les polities en un instant, appeler notre envoi, en passant le nom de notre action, qui est notre nouvel ordre. Ensuite, la charge utile, qui est notre ancien objet d'en haut. Faites défiler vers le haut Nous pouvons maintenant importer notre stand en haut de nos scripts. A partir du chemin du fichier de slash point, je vais décrocher le dossier, puis je vais décrocher le fichier. Plus sur le navigateur, nous pouvons maintenant tester cela en ajoutant une nouvelle commande, donc je vais juste commander quelques pepperonis passer votre commande. Maintenant, si nous allons à la console Firebase, nous donne un rechargement, nous voyons maintenant notre plus ancienne collection avec nos pizzas que nous avons créées auparavant. Essayons un de plus, deux Margherita, ceci est maintenant ajouté dans une Firebase. Cependant, si nous passons aux composants d'administration, donc avant/admin, faites défiler vers le bas jusqu'à nos commandes. Nous ne voyons que la seule valeur codée en dur que nous avons ajoutée plus tôt, donc nous pouvons maintenant supprimer ces valeurs codées en dur et rendre cette dynamique. Rappelez-vous dans le fichier order [inaudible], nous avons créé un getter get orders, que vous pouvez extraire dans nos commandes. Maintenant, nous allons à l'admin point view et mettre à jour nos composants. À l'intérieur de la section calculée, nous avons déjà notre getter que nous mappons actuellement. Nous pouvons en ajouter un de plus, qui est obtenir des commandes. Ensuite, dans le modèle, nous pouvons faire une boucle à travers et afficher les commandes. Cherchons la section de commande. À l'intérieur du corps de la table, nous pouvons ajouter un V pour boucle. Nous allons stocker chaque élément à l'intérieur de la variable automatique, nous allons également enregistrer l'index dans getOrders, nous devons également ajouter une clé dynamique. Pour combiner cela, saisissez la valeur de clé de l'ID point de commande. La première chose que nous pouvons faire est de numéroter les commandes individuelles, plutôt que la valeur codée en dur avant. A l'intérieur des accolades doubles, nous pouvons accéder à notre numéro d'index, et je vais ajouter une valeur d'un. C' est parce que les index commencent à la position zéro, nous voulons que le premier ordre soit porté, puis ainsi un. Maintenant, nous avons notre commande individuelle, nous allons maintenant créer un deuxième V pour boucle dans la rangée suivante. Cette boucle va être pour toutes les pizzas à l'intérieur de la commande, nous pouvons les stocker à l'intérieur d'une variable appelée OrderItem. Nous allons parcourir notre commande et saisir toutes les pièces individuelles. Nous pouvons ensuite ajouter une clé dynamique pour notre liste, et la clé peut être OrderItem et recadrer l'ID. Nous pouvons ensuite utiliser l'OrderItem pour remplacer nos valeurs codées en dur pour notre pizza. A l'intérieur des accolades doubles, nous pouvons accéder au nom du point OrderItem, nous pouvons accéder au prix, la quantité et aussi le prix vers le bas. Je vais également supprimer le symbole monétaire, car nous allons également l'ajouter à tous les prix plus tard, et cela sera automatiquement ajouté en quatre lignes. Sauvegardez ceci, et maintenant nous pouvons aller aux composants d'administration, faites défiler vers le bas et que nos deux commandes qui vont maintenant tiré dans Firebase. Si vous pouvez voir ces commandes sur votre écran, vous avez réussi à récupérer des commandes depuis le magasin central, qui est synchronisé avec Firebase. À l'heure actuelle, nous avons deux propriétaires, mais nous en aurons beaucoup plus. Il n'y a aucune garantie que lorsque nous sauvegardons dans l'ordre ou le récupérons de Firebase, il reviendra dans un ordre particulier. Rappelez-vous d'avant quand nous avons créé nos objets de commandes vers le bas dans AddNeworder, nous avons également ajouté un créé notre propriété, que nous pouvons maintenant utiliser pour extraire nos commandes à partir de Firebase dans un ordre de date soigné. Nous pouvons le faire sur toutes les commandes point JS à l'intérieur de notre action où nous définissons la référence de cinq magasins. Nous accédons à notre DBorderReference et voyons où nous pouvons également ajouter l'OrderByMethod, qui est fourni par Firebase, en passant dans une chaîne. La chaîne va être le nom des champs que nous voulons toujours acheter, ceci est créé que. Si nous sauvegardons ceci et passons au navigateur, nous voyons toujours nos deux ordres de Pepperoni et ensuite notre Margherita, qui sont dans l'ordre croissant. Si nous voulons retourner dans l'ordre décroissant, nous pouvons également passer dans un second argument séparé par une virgule de l'ESC, qui est court pour descendre vers l'admin et sympa et maintenant inversé. Cependant, je vais garder cela comme ordre croissant, car c'est plus pratique pour notre application. Mais c'est une fonctionnalité utile si vous voulez inverser l' ordre de tout ce qui vient de Firebase. 51. Déplacer Ajouter une nouvelle pizza à la boutique centrale: A l'intérieur de ces composants NewPizza.view, nous utilisons cela à l'intérieur de l'administrateur pour ajouter de nouveaux éléments au menu. Pour le moment, tout fonctionne très bien et comme prévu, nous poussons directement un nouvel objet pizza à Firebase, utilisons dbMenuref, puis dans le module menu.js, nous avons une configuration d'action, qui est une traction de liaison dans toutes les nouvelles pizzas et ensuite les enregistrer dans notre magasin. Ce que nous allons faire maintenant n'est qu'un refacteur. Nous allons déplacer la fonctionnalité d'ajouter une nouvelle pizza dans notre magasin. À l'intérieur de ce menu.js, je vais configurer cela comme une nouvelle action juste sous SetMenuref. Cela gardera toutes nos fonctionnalités associées ensemble et plus organisées. D' abord, nous pouvons créer cette action que je vais appeler addMenuItem. Cela va être asynchrone comme dans le contexte. Ensuite, comme un second argument, nous allons passer dans la pizza comme charge utile, qui passera lorsque nous envoyons cette action à partir de nos composants. Nous pouvons configurer le reste de la fonction, nous pouvons ajouter la gestion des erreurs, sorte que nous pouvons ajouter try and catch passer dans toutes les erreurs. Ensuite, à partir de maintenant, je vais ajouter une alerte à l'intérieur des ticks arrière, afin que nous puissions insérer une variable d'erreur, créer une nouvelle pizza, en passant notre erreur comme une variable. À l'intérieur de la section try, cela va encore être assez simple comme avec les ordres que nous appelons notre DBMenuReference. Ajoutez seulement la méthode, en passant dans la pizza comme charge utile. Espérons en haut, nous importons déjà notre référence de menu, donc c'est bien. Maintenant, nous pouvons nous diriger vers les nouveaux composants de pizza où nous pouvons maintenant envoyer cette action. Nous devons d'abord imposer notre magasin à l'intérieur du script VO. Le chemin final pour notre magasin est barre oblique de point dans le dossier de magasin, puis notre fichier de magasin, revenez à notre méthode d'ajout. Je vais commenter cela, accéder à notre magasin et ensuite nous pourrons envoyer notre action. Le premier argument est le nom de l'action de AddMenuItem. Ensuite, le second est la charge utile de la pizza, laquelle nous pouvons accéder avec cela.NewPizza. Tout ce que j'ai besoin de faire maintenant est de donner à ceci un Save et la tête à l'administrateur à l'intérieur du navigateur. Nous n'utilisons plus DbMenuReference donc nous pouvons faire défiler vers le haut et aussi supprimer cela aussi. Retour sur le navigateur et dans l'administrateur. Actuellement dans la base de données, nous avons juste le pepperoni et la margarita. Essayons un de plus. Ce n'est pas végétarien. Je vais juste envisager d'utiliser la description et le reste des options. Cliquez sur « Ajouter ». Voilà, nous avons une nouvelle pizza végétarienne à l'intérieur de notre menu. Nous pouvons également vérifier à l'intérieur des composants du menu et cela est également ajouté. Ce n'est qu'un petit refacteur, mais il garde toutes les fonctionnalités ensemble et plus organisé. 52. Supprimer les éléments de la base de données: Nous nous sommes concentrés jusqu'à présent sur l'ajout de nouvelles images et de nouvelles commandes, mais maintenant nous allons nous concentrer sur la suppression de choses de la base de données. Si vous passez à Visual Studio Code et vous dirigez vers les composants de vue Dot admin, à l'intérieur du modèle, nous avons déjà un bouton HTML configuré. Nous avons voulu supprimer tous les éléments de menu et ci-dessous à l'intérieur de la boucle des commandes. Nous avons également un bouton pour supprimer toute commande. Je vais commencer à la première personne, qui est de supprimer tous les éléments de menu en ajoutant un gestionnaire de clic pour notre bouton de suppression. Juste après la classe, nous pouvons ajouter un clic, puis configurer cela pour être Supprimer l'élément de menu, que nous voulons mettre en place comme une méthode juste en dessous. Cela doit prendre l'ID point de l'élément, donc nous savons lequel supprimer de la base de données. Ce gestionnaire de clics va envoyer une action de notre magasin, que nous allons créer très bientôt. Nous avons déjà notre magasin importé, donc nous pouvons maintenant faire défiler vers le bas et ajouter ceci comme une méthode. Juste après la déconnexion, nous pouvons ajouter l'élément de menu Supprimer, qui prend les arguments de l'ID que vous lui passez. Nous devons envoyer cette action que nous allons appeler Supprimer l'élément de menu en accédant à notre expédition de points de magasin. Le nom de l'action, que nous voulons appeler Supprimer l'élément de menu et aussi l'ID comme la charge utile. Plus dans le menu dot js qui est le module de magasin, nous pouvons créer cette action. Juste après avoir ajouté l'élément de menu, ajoutez une virgule. Nous pouvons configurer ce qui a été Supprimer l'élément de menu. Ce sera asynchrone. Nous pouvons analyser dans n'importe quel contexte et aussi la charge utile qui était l'ID, définit la fonction et aussi notre gestion des erreurs. Essayez attraper, en passant les erreurs, et nous pouvons alerter toute erreur à l'utilisateur à l'intérieur des backticks. Erreur de suppression de l'élément de menu et de passage de la variable qui est notre erreur. A l'intérieur de notre section de formation, ici, nous voulons attendre nos documents que nous pouvons récupérer à partir de notre référence de menu DB, et les documents que nous voulons saisir sont l'ID qui est passé comme charge utile. Nous pouvons stocker cela à l'intérieur d'une constante que je vais appeler élément. Pour cet élément, nous pouvons appeler la méthode de suppression Firebase, qui va supprimer cela de la base de données. Essayons cela dans la section admin, faites défiler vers le bas jusqu'à nos boutons dans le menu. Nous pouvons cliquer sur l'un d'eux. Ceci est maintenant supprimé de notre base de données. Vérifions simplement. Si nous allons au menu, nous voulons maintenant voir la margarita et le pepperoni. Il est maintenant supprimé de notre base de données. Nos résultats Firebase gardent également cela en synchronisation avec notre état local, qui signifie que notre admin et aussi menu est exactement le même que notre base de données. Nous pouvons maintenant faire la même chose pour supprimer nos commandes sur l'écran d'administration 2. Revenez à la vue Dot d'administration. Si nous allons à notre boucle de commandes, à l'intérieur de notre bouton, nous pouvons également ajouter un gestionnaire de clic à l'intérieur ici. Ce gestionnaire de clics va être Supprimer l'ordre. Cela doit également prendre l'ID, nous pouvons récupérer à partir de l'ID de point de commande. Faites défiler. Nous pouvons également créer une méthode pour cela, choses qui suppriment l'élément de menu. Il s'agit de supprimer l'ordre, en prenant l'ID. Nous pouvons ensuite envoyer une action que nous allons créer en un instant, qui va être appelée ordre de suppression. En passant l'ID comme charge utile, cette fois nous allons créer cette action à l'intérieur de notre module Orders dot js. Allons-y à l'intérieur du magasin, à l'intérieur de nos actions objet qui est situé à la fin de à nouvel ordre. Nous pouvons définir sur Supprimer l'ordre, peu près comme nous l'avons fait avant. Ce sera asynchrone. En passant dans n'importe quel contexte, l'ID en tant que charge utile. J' essayerais et notre section de coupe pour la gestion des erreurs en passant l'erreur et en alertant l'utilisateur. Encore une fois à l'intérieur des backticks, le texte désolé, il y avait un problème, en supprimant l'ordre, en passant par erreur comme notre variable. Tout comme l'élément de menu, nous allons également profiter de la méthode de suppression Firebase. Nous allons d'abord trouver nos documents en attendant la DB ou cette référence accédant aux documents individuels avec la charge utile de l'ID. Nous pouvons stocker cela à l'intérieur d'un ordre appelé constant, puis appeler commande dot delete. On peut maintenant tester ça dans l'administrateur. Vérifions d'abord combien de commandes nous avons. A l'intérieur, nous avons deux ordres séparés, donc nous pouvons maintenant supprimer l'un d'entre eux. Je supprime le deuxième sur la console et actualise. Puisque nous avons supprimé nos deux commandes, nous n'avons plus la collecte des commandes. Tout fonctionne bien, ce qui signifie que tous nos boutons de suppression sont maintenant terminés. Je vais laisser cette vidéo là, et ensuite nous pourrons rendre l'administrateur plus sécurisé en la cachant aux utilisateurs non autorisés. 53. Masquer l'admin aux utilisateurs non autorisés: Nous allons maintenant faire un peu de travail dans les composants d'administration. Faites en sorte que ces sections d'administration ressemblent et se comportent exactement comme nous le voulons. À l'heure actuelle, même lorsqu'un utilisateur n'est pas connecté, nous avons toujours accès aux informations sensibles telles que les éléments du menu, les commandes, nous pouvons toujours supprimer des articles, et nous pouvons ajouter des pizzas supplémentaires même si nous ne sommes pas connectés. Ce que nous voulons faire est d'ajouter un rendu conditionnel en utilisant v-if. Lorsqu' un utilisateur n'est pas connecté, nous voulons simplement afficher les composants de connexion. Quand ils sont connectés, nous voulons le changer et cacher ces composants, laissant le reste de la section admin. Si nous allons de l'avant et nous nous connectons, nous pouvons voir par notre e-mail en haut, c'est que nos composants de vue administrateur ont accès à nos états connectés. Il a accès à cela en raison d'un getter à l'intérieur de l'Admin.Vue appelé « CurrentUser ». Je vais utiliser ça maintenant pour cacher et montrer le contenu. Allons regarder nos modèles d'administration et écrire tout en bas. Nous aurons un composant de connexion juste ici, alors tout ce qui précède à l'intérieur de notre modèle est des informations sensibles, que nous ne voulons afficher qu'une fois connecté. Pour ce faire, je vais envelopper tout le reste dans une nouvelle section. Tout ce qui est au-dessus de la connexion. Défilons jusqu'au sommet, juste en dessous du wrapper admin, nous pouvons créer une nouvelle section, puis ajouter un rendu conditionnel en utilisant v-if. Nous pouvons vérifier si l'utilisateur actuel n'est pas égal à null. Faites défiler vers le bas, nous pouvons maintenant fermer le reste de la section, juste au-dessus de notre login. Maintenant, tout sauf la section de connexion ne montrera que si l'utilisateur est connecté avec le composant de connexion lui-même. Nous pouvons faire le contraire à l'intérieur de nos déclarations v-if. Nous pouvons vérifier si l'utilisateur actuel est égal à null. Si cela est vrai, cela signifie que l'utilisateur actuel n'est pas connecté, puis nous rendrons les composants de connexion, donnons à ceci une sauvegarde, puis nous dirigeons vers le navigateur. On n'a pas pu se connecter. Ce qui signifie que nous voyons toute la section d'administration. Si nous faisons défiler vers le bas, notre composant de connexion est maintenant masqué. Essayons de déconnecter. Maintenant, cela supprime toutes les informations d'administrateur sensibles, laissant un formulaire de connexion. Vérifions si cela fonctionne également après que nous nous sommes connectés. Une fois de plus, nous voyons la section admin, et si nous allons au bas, le composant de connexion est maintenant supprimé. Maintenant, nous avons l'écran d'administration affiché correctement, selon si l'utilisateur est connecté, ou déconnecté. 54. Calculer le panier total: Mais quelques instants à l'intérieur de notre section de menu, nous pouvons ajouter avec succès des articles pour les paniers d'achat. Nous pouvons également augmenter et diminuer la quantité pour chaque article de ligne. Comme vous pouvez le voir ici, le nombre n'est pas encore formaté à une valeur monétaire, mais nous le ferons dans la prochaine vidéo avec un filtre. En bas, nous avons le texte du total de la commande, mais nous n'avons pas d'affichage du prix total pour l'instant. Mais c'est ce que nous allons faire dans cette vidéo en configurant une propriété calculée, qui va recalculer notre total. Passons à nos composants de vue par points de menu, et maintenant faites défiler vers le bas jusqu'à notre script. A l'intérieur d'ici, semble que notre panier est actuellement un tableau, nous pouvons utiliser la méthode de la carte pour laisser à travers tous les articles dans le panier, c'est probablement le prix et la quantité qui va recalculer notre total. Maintenant, nous pouvons le faire à l'intérieur de la section calculée, juste après où nous mappons nos getters, et une virgule, et je vais appeler ceci le total. Comme commencer par initialiser une variable appelée le coût total, que nous pouvons obtenir très bientôt et donc ces deux ajouter la valeur initiale de zéro. Ensuite, pour obtenir cela, nous allons parcourir notre panier, afin que nous puissions accéder à ce panier fait, puis nous allons utiliser la méthode JavaScript map, en passant la variable item, qui est chaque élément à l'intérieur de notre paniers. À l'intérieur, la façon dont nous allons saisir la valeur, sera en accédant à l'élément individuel. Nous devons multiplier la quantité de chaque article par le prix point de l'article. Cela nous donnera la quantité totale pour chaque article de ligne, donc le premier dans la boucle, ce moment sera les deux margheritas. Ensuite, nous aurons les trois margheritas sur la prochaine boucle. Je peux stocker cela dans notre variable de coût total, puis ajouter à la valeur avec plus égal. Après cela, nous allons ensuite retourner la valeur du coût total. Ceci est disponible lorsque nous appelons notre propriété calculée. Nous pouvons maintenant mettre la valeur de total, après notre total de commande ici à l'intérieur des accolades doubles. Donnez-nous une sauvegarde et dirigez-vous vers le navigateur. À l'intérieur de notre menu, nous pouvons maintenant ajouter des pizzas. Nous voyons maintenant avec une de chaque quantité, le total de la commande est en cours de mise à jour. Essayons d'augmenter la valeur. Encore une fois, et aussi en déduisant un article et ceci est mis à jour avec chaque élément supplémentaire. Maintenant, notre coût total du panier est maintenant affiché. Dans la vidéo suivante, je vais voir comment nous pouvons ajouter un filtre global au prix afin qu'il s'affiche dans un format de devise. 55. Filtre de devises global: Dans la dernière vidéo, nous avons créé un coût total au bas de notre panier, puis l'avons sorti en utilisant une propriété informatique. Si nous ajoutons au panier des quantités, vous remarquerez que de temps en temps nous obtenons beaucoup de décimales, donc nous devons ajouter un certain format à cette monnaie. Chaque ligne a un symbole de devise codé en dur, mais nous n'en avons pas pour le total de la commande. Pour réparer cela, je vais utiliser un paquet npm appelé accounting-js, qui va ajouter un peu d'analyse et de formatage de devises à nos nombres. Il fonctionne également bien comme un filtre vue.js. L' installation est simple, nous pouvons utiliser la commande npm i à l'intérieur du terminal. Ouvrons cela, puis utilisez npm i et le nom du paquet est accounting-js. Pendant que cela est en cours d'exécution, je vais retourner à notre serveur, puis dans le fichier main.js où nous pouvons importer cela en haut. Nous voulons importer ceci en tant que comptabilité et le nom du paquet est accounting-js. Nous pouvons ensuite configurer cela comme un filtre de vue en accédant à l'instance de vue, puis un nom de méthode qui est appelé filtre. Cela va mettre en place un filtre global afin qu'il soit disponible pour l'utilisation dans tous nos composants. Notre filtre prend en compte deux arguments. Le premier argument est le nom que nous allons donner à notre filtre. Je vais appeler cette monnaie. Ensuite, la seconde sera une fonction. Une fonction va prendre la valeur que nous lui passons. Ce sera le prix que nous devons formater, donc le prix de chaque pizza individuelle sur le total de la commande. Nous voulons ensuite retourner une nouvelle valeur de notre paquet de comptage. Nous allons ensuite accéder à une méthode qui s'appelle l'argent de format et l'argent de format prend notre valeur à traiter. Nous pouvons également mettre cela sur sa propre ligne en supprimant les instructions de retour et aussi les accolades, il suffit de rendre notre code un peu plus court, et aussi assurez-vous que cela est orthographié correctement, alors changez ceci. Nous avons déjà mentionné que cela crée un filtre global, sorte que nous pouvons l'utiliser instantanément dans n'importe lequel de nos composants. Nous devons l'utiliser dans le menu des composants de vue. Nous pouvons commencer à l'intérieur de notre total de commande. Pour utiliser notre filtre, tout ce que nous avons à faire à l'intérieur des accolades doubles, c'est d'utiliser le symbole de tuyau, puis de passer notre nom de filtre, qui était monnaie. Cela n'a pas de symbole de dollar codé en dur, mais cela est ajouté à partir de notre paquet de devises. Juste au-dessus, nous avons le prix individuel pour chaque ligne. Nous pouvons supprimer le symbole du dollar codé en dur, puis ajouter également dans notre filtre de devise. Nous en avons aussi un de plus si nous sauvegardons cela et revenons à notre menu. Nous avons également les prix pour chaque pizza individuelle. Défilons vers le haut dans notre section de menu. L' option.price, ajouter dans le tuyau et notre filtre de devise, supprimer tout symbole de dollar codé en dur, donner à ce fichier une sauvegarde et plus au navigateur. Dans notre menu, nous voyons toujours le symbole monétaire même si nous avons supprimé la valeur codée en dur. Ajoutons quelques articles à notre panier. Nous voyons les symboles du dollar à l'intérieur d'ici aussi, et essayons d'augmenter la valeur. La monnaie semble maintenant s'afficher correctement. Le dernier endroit où nous devons ajouter ce filtre est dans les composants d'administration, où nous affichons nos commandes. Faisons ça maintenant. A l'intérieur des composants d'administration, nous devons chercher notre boucle, nos articles de commande, puis quand nous produisons le prix, nous pouvons ajouter notre filtre, comme nous l'avons fait auparavant. Plus sur le navigateur et nous pouvons tester cela. Commençons par passer une nouvelle commande. Envoyer est désactivé et dirigez-vous vers notre administrateur où nous pouvons également avoir besoin de nous connecter. Ajoutez les détails de l'utilisateur. Faites défiler jusqu'à nos commandes, et maintenant nous avons un formatage pour notre prix. Nous avons aussi une erreur ici pour notre taille, donc nous avons juste besoin de changer cela pour être orderitem.Size, et là nous allons. C' est maintenant notre filtre qui fonctionne avec le format de devise dans. symbole Dollar est la valeur par défaut lors de l'utilisation de accounting-js. Cela peut être facilement changé, cependant, si vous préférez, puis ajoutez quelques étapes simples à suivre si vous passez à la documentation. Pour l'instant, je vous verrai dans la prochaine vidéo où nous allons ajouter quelques touches finales à notre projet. 56. Touches de finition: Nous avons fait beaucoup de travail pour arriver à cette étape du projet, si bien fait pour le faire jusqu'ici. Je voulais juste ajouter quelques touches de finition dans cette vidéo, commençant à l'intérieur des composants de connexion. Pour le moment, si nous nous déconnectons, il peut être évident pour certains qu'il s'agit d'une section de connexion, mais nous pouvons également ajouter du texte pour indiquer à l'utilisateur qu'il doit se connecter. Sur tous les composants de la vue de connexion, passons en haut des modèles. Nous trouverons notre formulaire ainsi que notre wrapper de connexion. À l'intérieur ici, je vais ajouter un « p » éléments avec du texte. Veuillez vous connecter pour continuer. Enregistrez ceci et revenez dans le navigateur. Nous allons maintenant voir notre texte ici, demander à un nouvel utilisateur de se connecter. La prochaine chose que je vais faire est d'ajouter un garde de navigation à cet administrateur. Si l'utilisateur est connecté, n'oubliez pas, nous pouvons voir des informations sensibles et toute personne qui a accès peut voir les commandes et également supprimer toutes les commandes ou pizzas. Pour protéger cet administrateur si l'utilisateur devait naviguer loin sans se déconnecter, nous pouvons ajouter un garde de navigation, qui va alerter l'utilisateur et également se déconnecter automatiquement. Permet de le faire dans les composants admin.view. Nous pouvons ajouter notre garde de navigation à l'intérieur de nos scripts. Juste après nos méthodes, je vais ajouter le garde tout Beforerouteleave. Comme nous l'avons vu plus tôt, cela prend deux de et aussi suivant. La première chose que nous voulons faire est d'ajouter une déclaration if où nous pouvons ajouter une boîte de confirmation. Cela avertira l'utilisateur qu'il sera déconnecté s'il continue à naviguer loin de la zone d'administration, afin que nous puissions avoir une chaîne de « Vous serez déconnecté lors de la sortie de l'administrateur ». C' est une question. Si cela est vrai, s'ils continuent à naviguer loin, ce que je vais accéder à notre magasin, nous pouvons alors appeler dispatch et le nom de l'action que nous voulons envoyer est déconnecter. Cela déconnectera automatiquement l'utilisateur lors de la sortie de l'administrateur. S' ils devaient annuler cette conformation, nous pouvons l'ajouter dans une autre déclarations. Tout ce que nous voulons faire ici, c'est rester sur les mêmes routes. On pourrait le faire en passant faux à suivant. Disons ceci sous l'administrateur, nous devons nous connecter. Maintenant, nous sommes à l'intérieur des composants d'administration. Essayons de passer au menu. On reçoit une alerte. Si nous annulons cela, nous restons sur la même page. Retournez au menu. Cliquez sur « OK ». Vous voyez que nous nous sommes déconnectés, mais nous sommes toujours sur la page d'administration. Pour continuer sur les composants de menu ou tout autre, alors vous devez également appeler à l'intérieur ici. Nous pouvons essayer une fois de plus. Nous sommes maintenant connectés. Essayons le sujet. On peut annuler et on est toujours à l'intérieur de l'administrateur. Essayons une fois de plus d'accord et nous prenons maintenant nos routes au-dessus. La dernière chose est un CSS mineur, que je vais ajouter à la vue principale dans la section Style. La première que je vais faire est de cibler nos entrées et notre zone de texte pour notre nouvelle entrée Pizzas, donc entrée, textarea. Tout ce que je vais faire ici, c'est d'augmenter la taille de la police à 1.1 rems. Ensuite, nous voulons ajouter un style général dans les boutons afin que nous ne puissions pas supprimer la bordure en définissant la valeur null et aussi augmenter la taille de la police pour être 1.1 rems aussi. À l'intérieur de notre application, nous avons également quelques classes de btn_green et aussi btn_red. Cela manque également actuellement nos styles. Commençons par le vert. Tout ce que vous devez faire est de définir la couleur d'arrière-plan et définir est d'être une valeur RVB de 101,168, puis 101. Ensuite, le btn_red. La couleur de fond, cela va aussi être une valeur RVB de 241, 70, et aussi 70 nous donnant la couleur rouge. Au-dessus du navigateur, nous avons des couleurs vertes à l'intérieur ici et aussi ici aussi. Essayons la section admin, où nous avons aussi nos boutons rouges. On a les signes rouges. Aussi, où nous retirons les commandes sur les pizzas, nous avons aussi nos boutons rouges. Si nous le voulions, nous pourrions aller encore plus loin avec le style dans, mais je vais diriger ce projet ici puisque c'est une vue JS cours. Ensuite, nous allons passer à une nouvelle section qui vous permettra de couvrir un nouveau sujet, qui sera le chargement paresseux et comment diviser notre application en paquets plus petits. 57. Qu'est-ce que le fractionnement du code et le chargement paresseux ?: Avant de plonger dans le fractionnement du code et le chargement paresseux , d' abord, regardons rapidement pourquoi nous pouvons en avoir besoin. La première chose à noter est que la Vue CLI utilise le web park dans les coulisses. Il résume toute la configuration afin que nous puissions nous concentrer sur les développements ou les versions de la CLI Vue, vous disposez d'un fichier de configuration web pack disponible pour ceux dans notre répertoire de projet que nous pourrions inspecter et modifier. Cette nouvelle version que nous utilisons dans ce cours ne l'a pas disponible mais nous pouvons toujours voir le contenu de ce fichier en utilisant la commande de sortie de la CLI Vue. Nous pouvons le faire si nous descendons au terminal et ouvrons un nouvel onglet pour garder le serveur en cours d'exécution et la commande que nous pouvons utiliser est view inspect. La flèche supérieure à. Le fichier que nous voulons sélectionner est la sortie JS. Il entre et cela générera un fichier JS de sortie suit à l'intérieur de notre projet. Une fois qu'il est généré, nous pouvons aller dans notre barre latérale et dans notre projet. Voici notre fichier output.js, que nous venons de générer. Maintenant, si nous faisons défiler le fichier vers le haut et vers le bas, il y a beaucoup de choses ici, mais nous pouvons utiliser la fonctionnalité de recherche des éditeurs de texte avec commande ou contrôle F. Je ne veux pas chercher l'entrée. Entrée nous mènera à près du bas du fichier et pointez vers le point d'entrée principal de notre application qui se trouve dans le fichier main.js. Ce fichier est le niveau supérieur de notre application et contient tout pour tous les projets. Webpack les regroupe tout ce qui est à l'intérieur de ces projets inclut tous les fichiers, tous nos actifs, puis je vais en mettre un dans un seul fichier. Ce qui est appelé le build.js. Nous pouvons également voir cet emplacement de sortie par l'union de recherche pour les sorties et cela pointera vers un chemin de fichier, qui est notre répertoire de projet. Ensuite, il va générer un dossier de disque suit. Maintenant, nous savons à propos de cette entrée et de cette sortie. Je vais supprimer notre fichier output.js car il n'est pas nécessaire dans notre application. Ce fichier bundled.js unique, qui est stocké dans notre dossier disque, que nous allons créer prochainement, est téléchargé à partir du serveur la première fois qu'un utilisateur visite notre site Web ou notre application. C' est tout à fait bien s'ils le construisent relativement petit. Mais dans certaines applications qui contiennent beaucoup de code et d'actifs, ce fichier peut devenir vraiment volumineux et prendre beaucoup de temps à télécharger depuis le serveur, en particulier sur les appareils mobiles. Cela peut conduire à une mauvaise expérience utilisateur. Cela nous amène au sujet du fractionnement du code. Quel est le processus de séparation de ces fichiers groupés ou de notre application en paquets plus petits que nous ne pouvons télécharger que lorsque nous en avons besoin. Nous devons décider quel est le contenu minimum ou contenu le plus important que l'utilisateur doit télécharger initialement pour garder le bundle aussi petit que possible. Nous pouvons ensuite diviser le reste de l'application pour être téléchargé uniquement en cas besoin tels que les liens de menu supplémentaires qui ne sont pas couramment utilisés, et télécharger seulement une belle partie supplémentaire lorsque nécessaire. Est ce qu'on appelle le chargement paresseux. Si nous allons dans le navigateur et dirigeons vers la page d'accueil de notre application. Lorsque l'utilisateur visite pour la première fois notre application, nous devons inclure cette page d'accueil car il s'agit des principaux points d'entrée ainsi que des liens en haut afin que l'utilisateur puisse naviguer. Nous n'avons pas besoin d'inclure les composants ou le contenu de ces liens. Cependant, il peut s'agir d'un bundle distinct à télécharger uniquement si un utilisateur clique dessus. Un autre exemple à enregistrer sur la taille de téléchargement initiale consiste à télécharger les composants de la page d'accueil, mais uniquement le contenu du pli de page. Le pli est le bas de la zone visible du navigateur afin que nous puissions seulement télécharger le contenu que nous pouvons voir avant que l'utilisateur ne fasse défiler. Des applications telles que Twitter, nous ferons quelque chose de très similaire en ne chargeant que des tweets. Lorsque vous faites défiler la page vers le bas, ce qui accélérera les choses. Il y a aussi beaucoup plus de façons de diviser notre code aussi et la charge dépend de la conception de votre application. Par exemple, nous pouvons exclure le contenu d'une fenêtre contextuelle ou même le contenu d'une section d'une page qui a été rendue par une instruction if. Comme vous pouvez le voir, il y a beaucoup de façons de penser et nous en aborderons quelques-unes dans cette section. 58. Chargement paresseux avec le routeur Vue: Nous pouvons appliquer le fractionnement du code et le chargement des lettres lors de l'utilisation du routeur de vue. Ceci est relativement facile à mettre en œuvre car nos pages sont déjà dans leurs propres fichiers distincts. Cela signifie que nous pouvons séparer les composants de cette page et les charger uniquement lorsqu'un utilisateur visite ce lien. Par exemple, sur la page d'accueil, se peut que nous voulions charger ce menu de composants d'accueil n'importe quoi, le contact et les composants à propos de nous jusqu'à ce qu'un utilisateur clique dessus. Tout d'abord, passons aux outils de développement va cliquer avec le bouton droit de la souris et inspecter. Un incident en réseau, il se recharge et assurez-vous que le bouton JavaScript est cliqué afin que nous ne voyions que nos fichiers JavaScript. Ici, nous voyons notre application dot fichier JS qui contient tous nos JavaScript pour tous les projets. Nous pouvons voir que si nous cliquons sur des liens de menu supplémentaires, les fichiers normaux sont téléchargés ce qui signifie que nous avons actuellement toutes les applications JavaScript à l'intérieur d'un fichier. Il est important de se rappeler qu'aucun autre fichier n'a été chargé ici et que cela deviendra plus clair très bientôt. Si vous voulez diviser nos projets et ne charger ces composants dans le menu qu'lorsqu'un utilisateur clique dessus, nous devons apporter une modification à notre fichier de points de routes JS. Nous pouvons profiter de la syntaxe de fractionnement de code web packs en utilisant une importation dynamique qui est un remplacement de notre importation de composant d'origine lattes vers notre fichier JS point de route à l'intérieur de l'éditeur de texte. Nous allons économiser nous importons nos composants normaux. Nous allons les remplacer par une fonction qui va être une importation dynamique, et cette fonction est responsable de l'importation nos composants au fur et à mesure qu'ils sont appelés. Tout d'abord, remplacons le lien de menu. Je vais commenter cela, puis configurer une fonction appelée menu, qui va utiliser la syntaxe des importations dynamiques des packs web pour importer le menu à partir du même chemin de fichier que ci-dessus. Nous copions ceci comme une chaîne, collez-le dans notre importation et ensuite nous pouvons faire exactement la même chose pour notre contact et sur ces liens. Comments out the about crée une fonction about. Où allons-nous créer une importation et le chemin du fichier est exactement le même que ci-dessus. Copiez ce lien et collez-le dans, et puis finalement nous avons contact deux commenter cette. Nous pouvons faire exactement la même chose créer notre fonction et saisir notre chemin de fichier pour le contact. Cela signifie maintenant que nous n' importons pas immédiatement chaque composant lorsque l'application est chargée. Au lieu de cela, ils sont maintenant des fonctions et ils ne sont importés que lorsque nécessaire en appelant cette fonction, tout est pris en charge dans les coulisses par webpack. Maintenant, si nous revenons aux outils de développement du navigateur, enregistrez ce fichier, rechargez le navigateur, nous pouvons effacer notre historique, puis recharger. Encore une fois, nous voyons nos applications initiales parce que nous sommes sur les composants de la maison. Cliquez sur le menu et nous verrons un nouveau fichier JavaScript a été importé avec le contenu de ces composants. Essayons les contacts et le sujet et nous allons renouveler les fichiers générés. Ceux-ci ont été chargés à la demande depuis le serveur, ce qui signifie que le code de ces trois composants n'est plus dans nos applications d'origine, ce qui signifie que nous avons une taille plus petite lorsque l'application est chargée pour la première fois. Si nous cliquons à nouveau sur tous nos composants, nous voyons que ces fichiers ne sont pas dupliqués puisque nous les avons déjà téléchargés et c'est un moyen efficace de séparer notre bundle en fichiers plus petits et de les charger uniquement lorsque requis. Dans la vidéo suivante, nous allons voir comment utiliser morceaux nommés pour regrouper nos composants ensemble. 59. Regrouper des composants dans un même bloc: Nous savons maintenant comment diviser le bundle et soulever un peu de composants si nécessaire. Parfois, bien que nous puissions vouloir regrouper certains composants associés à télécharger ensemble, et ces groupes sont appelés morceaux. Par exemple, lorsqu'un utilisateur clique sur l'un de ces liens dans le menu, nous pouvons également obtenir tous les autres composants du menu. Ceci est utile si nos composants de menu sont petits et que nous voulons qu'ils soient prêts pour l'utilisateur. Commençons à nouveau dans le fichier routes.js. Actuellement nos liens de menu, qui est le menu sur et contact. Comme nous le savons depuis la dernière vidéo, ont tous été importés indépendamment lorsque l'utilisateur clique sur eux. Je vais maintenant regrouper le contact et ses composants, ce qui est simple à faire. Tout ce que nous devons faire, à l'intérieur de notre importation, est d'ajouter un commentaire du nom du morceau de pack web, puis donner à ce groupe un nom de notre choix. Nous créons donc un commentaire avec la barre oblique et l'étoile. Quand il se ferme avec l'envers, qui est l'étoile et la barre oblique avant. À l'intérieur, nous ajoutons les commentaires du nom du morceau de pack web, le tout dans le cas courant. Ensuite, après le deux-points, nous pouvons ajouter un nom que vous voulez fournir à notre groupe, et nous allons l'appeler le groupe de menus. On pourra alors attraper ce groupe. Je vais copier ceci et ajouter cela à notre contact. Collez cette image à notre importation, enregistrez le fichier, puis sur le navigateur. Nous pouvons recharger et vider la console. Donc encore une fois, nous voyons notre app.js. Si nous cliquons sur le « Menu », notre bundle indépendant pour notre menu est chargé. Maintenant, nous devrions voir que le sujet et le contact seront téléchargés dans le même fichier. Nous avons donc le groupe de menus. Essayons le sujet. Maintenant, des pages supplémentaires sont téléchargées pour ces deux composants car ils contiennent dans notre groupe. C' est ainsi que nous pouvons regrouper les composants associés, et nous pouvons vraiment affiner la façon dont nous voulons que notre page soit chargée pour notre application. 60. Chargement paresseux avec rendu conditionnel: À l'intérieur de notre écran d'administration, nous affichons et cachons certaines informations à l'utilisateur, selon qu'il est autorisé à les voir ou non. Nous pouvons également appliquer le chargement paresseux ici aussi. Ce qui nous permettra de télécharger uniquement les sections cachées après que l'utilisateur se connecte avec succès. Je vais commencer par supprimer toutes les importations dynamiques du routes.js, laissant notre onglet réseau plus clair pour cette vidéo. Donc, je vais rétablir le menu d'origine. Commenter l'importation dynamique. La même chose pour About et aussi pour notre contact. Ajout de tous les composants d'origine. Ainsi, le processus de téléchargement du contenu seulement après connexion n'est pas plus difficile que ce que nous avons fait jusqu'à présent. Cela implique essentiellement de déplacer le contenu caché dans un composant séparé , puis nous pouvons utiliser une importation dynamique pour réintroduire le contenu dans l'administrateur. Nous pouvons commencer par créer un nouveau composant ou un nouveau fichier appelé AdminContent.vue. Donc, faisons cela comme toujours à l'intérieur du dossier des composants. Donc adminContent. Ainsi, comme toujours, nous ajoutons également notre modèle. Nous pouvons également créer nos balises de script. Puis enfin nos styles vers le bas. Maintenant, si nous revenons à notre Admin.vue d'origine. À l'intérieur, nous allons commencer par passer de certains contenus, à nos nouveaux composants. Le contenu que nous allons déplacer est cette section. Si nous laissons dans les composants de connexion d'origine et saisissons la section de fermeture, et aller jusqu'au haut de notre modèle. Enlevez cela, en laissant notre div admin_wrapper et aussi nos composants de connexion à AdminContent. Nous le collons maintenant dans notre nouveau modèle. Faites défiler vers le haut. Nous pouvons également supprimer nos déclarations If. Vérifiez si l'utilisateur actuel n'est pas égal à null, nous gérerons cette fonctionnalité dans un instant. Nous devons également retourner à notre administrateur et passer sur le contenu du script. Toutes nos importations, nous pouvons également copier nos données, calculées, nos méthodes, et jusqu'à la balise de script de fermeture. Clôtons tout ça. Ensuite, collez ceci à l'intérieur de notre script AdminContent, que nous avons créé auparavant. Déplacez les valeurs par défaut d'exportation et collez-les dans nos réservoirs de script vides. Puisque nous sommes maintenant dans un autre composant, nous devons changer le nom de notre composant. Cette fois, nous allons l'appeler AdminContent. Ajoutez du contenu à la fin de ceci. Ce nouveau composant vue est lié au contenu réel plutôt qu'à la connexion. Je vais supprimer les importations de connexion et si nous faisons défiler vers le bas, nous pouvons également supprimer les composants de connexion. Cela devrait maintenant être l'ensemble de nos fonctionnalités cachées déplacées dans ses propres composants. Tout ce que nous devons faire maintenant est de passer sur certains styles de l'Admin.vue. Faites défiler vers le bas jusqu'à notre section de style. Les styles que nous devons supprimer sont fondamentalement tout après notre admin_wrapper. L' admin_wrapper est lié à ce composant admin. Nous devons saisir tous les autres styles qui sont liés au contenu. Alors mettez tout en laissant l'admin_wrapper à l'adminContent et nous pouvons les coller à l'intérieur de nos balises de style. Donnez à ce fichier une sauvegarde et maintenant nous pouvons revenir à l' admin.vue et nous pouvons travailler sur la zone de script. Avant de supprimer les composants de connexion et l'enregistrement de l'AdminContent. Ceux-ci font partie de l'original Admin.vue, donc nous pouvons les ajouter à l'intérieur d'ici. Importer la connexion à partir du chemin d'accès du fichier qui est. /Login. Nous allons également utiliser la propriété calculée de l' utilisateur actuel à l'intérieur de ce composant. Nous pouvons rendre conditionnellement notre contenu. Pour ce faire, nous devons également importer des MapGetters que nous avons utilisés précédemment. C' est de notre paquet vuex. Nous pouvons ensuite ajouter nos valeurs par défaut d'exportation. Le nom du composant, qui était admin. Nous pouvons alors enregistrer nos composants et le seul composant dont nous avons besoin est notre login, nous venons d'importer, séparé par une virgule. Nous devons ensuite ajouter notre section calculée, qui est pour nos Getters, afin que nous puissions nous propager dans MapGetters. A l'intérieur de notre tableau, le Getter dont nous avons besoin est l'utilisateur actuel. Donc, ce Admin.vue va être un composant parent avec le contenu imbriqué à l'intérieur. Cela nous permet de rendre conditionnellement notre contenu, et nous pouvons également importer dynamiquement, comme nous l'avons fait avec n'importe laquelle de nos itinéraires précédemment dans cette section. Nous faisons cela exactement la même chose que notre routes.js. Nous allons créer une fonction pour notre AdminContent et voulons la configurer comme une fonction de flèche en ligne, où nous ajoutons nos importations dynamiques, qui pointe vers nos nouveaux composants d'AdminContent. Nous devons également enregistrer ce composant pour qu'il fonctionne aussi. Donc, juste après notre connexion, ajoutons notre AdminContent. Enfin, nous pouvons ajouter le composant à notre modèle juste au-dessus. En utilisant également le rendu conditionnel que nous avons supprimé plus tôt. Donc, en haut de notre composant de connexion, ajoutons dans notre AdminContent. Cela va utiliser le if, vérifiez si l'utilisateur actuel n'est pas égal à null. Donc, cela fait fondamentalement le contraire de notre composant de connexion. Si l'utilisateur ici est égal à null, nous allons rendre un composant de connexion. Si l'utilisateur est connecté, donc pas égal à null. Au lieu de cela, nous allons afficher le contenu. Assurez-vous donc que ces deux fichiers sont enregistrés et dirigez-vous vers le navigateur dans le composant admin. Donc, nous ne sommes pas connectés pour le moment, ce qui signifie que nous voyons le composant Login afin que nous puissions ajouter notre e-mail et notre mot de passe. Une fois que nous nous connectons, nous sommes amenés au contenu. Nous pouvons également tester le chargement paresseux. Nous pouvons ouvrir la console et aller dans l'onglet Réseau. Je vais me déconnecter, puis recharger. Pour le moment, nous n'avons que l'importation dynamique supportée, qui est pour notre contenu. Par conséquent, nous ne voyons que le fichier app.js. Si nous essayons maintenant de vous connecter. Nous voyons ensuite un deuxième paquet a été téléchargé à partir du serveur, qui est pour notre contenu caché. Donc, ce genre de chose est un bon cas d'utilisation pour si nous ne nous attendons pas à ce que beaucoup d'administrateurs se connectent au système, évitant ainsi tout code inutile à télécharger pour l'utilisateur final. Et c'est juste un autre angle à considérer lors de l'utilisation du chargement paresseux. 61. Règles de Firebase: Nous avons configuré l'authentification pour permettre uniquement aux utilisateurs connectés d'accéder à notre administrateur. Mais nous voulons aussi nous assurer que nous avons aussi notre sécurité back-end. Au cas où quelqu'un contournerait notre sécurité. Nous pouvons le faire avec Firebase en ajoutant des règles. Si nous nous dirigeons vers notre console Firebase, puis en haut, nous avons l'onglet règles à l'intérieur de notre base de données. Si nous ouvrons ça, pour le moment, notre backend n'est pas sécurisé. Nous pouvons voir ici que nous avons une correspondance pour tous nos documents à l'intérieur de notre base de données. Ensuite, nous autorisons les privilèges de lecture et d'écriture à toute personne qui accède à notre site. Nous pouvons rendre cela plus sûr en ajoutant nos propres réals personnalisés. Je vais commencer par supprimer la correspondance interne à tous nos documents, laissant cet automatch juste ici. Cet automatch avec le chemin du fichier ici, pointe essentiellement vers nos points d'entrée de base de données. Nous pouvons alors créer à l'intérieur des règles séparées pour notre menu et toutes ses collections si nous le souhaitons. Je vais commencer par la collection de menus. La façon de faire cela, nous pouvons ajouter correspondance, puis un chemin de fichier à notre collection, qui est menu. Dans notre menu, nous avons nos documents séparés. Nous pouvons les installer à l'intérieur d'une variable appelée l'ID doc qui est à l'intérieur des accolades. À l'intérieur, nous pouvons alors mettre en place des règles distinctes, ou même combiner des règles pour lire, écrire, mettre à jour ou supprimer des actions. À l'intérieur, je vais autoriser l'accès à directement dans notre base de données, mettre à jour dans notre base de données, et aussi supprimer à l'intérieur de la même règle. Ici, nous voulons seulement permettre aux utilisateurs d'écrire, de mettre à jour et de supprimer des entrées d'une base de données s'ils sont actuellement enregistrés. Nous pouvons le faire en vérifiant si la requête point auth uid n'est pas égal à null. Ici, nous vérifions essentiellement si l'objet de requête, qui est fourni lorsque nous faisons une demande à Firebase, a un identifiant unique pour l'utilisateur actuel. Si c'est le cas, nous leur permettons d'effectuer des actions sur notre base de données, ce qui signifie qu'ils sont enregistrés et autorisés à le faire. Si ce n'est pas Firebase va atterrir au bloc cette demande. Après cela, nous allons également autoriser les règles de lecture. C' est parce que nous voulons permettre à tous les utilisateurs de lire les éléments du menu. Nous pouvons ensuite ajouter des règles pour nos plus anciens aussi. Juste en dessous de cela, nous pouvons alors créer une deuxième marche. Cette fois, nous voulons pointer vers notre collection la plus ancienne. Nous pouvons à nouveau utiliser l'ID du document, qui est une variable utilisée pour accéder à n'importe quelle commande individuelle à l'intérieur de cette collection. Commencez à l'intérieur d'ici avec les règles de lecture. Puisque ce sont les commandes et les commandes sont uniquement disponibles à l'intérieur de l'administrateur. Nous voulons permettre aux utilisateurs de lire nos commandes uniquement s'ils sont connectés. Comme les deux nous pouvons accéder aux objets d'authentification point de requête, nous pouvons vérifier si l'utilisateur a un ID unique non égal à null. Par conséquent, ils sont enregistrés et connectés. Ensuite, ils peuvent lire les ordres. Prochaine étape, nous allons autoriser les règles d'écriture. Ça va être pour n'importe qui. Puisque nous voulons permettre à tout utilisateur d'aller dans tout le site et crée une commande sans le registre de besoin. Les commandes sont un peu plus complexes dans ce genre de projets. Ici, nous écrivons juste dans quelques règles de base. Mais nous pourrions aller beaucoup plus loin en permettant seulement au créateur d'un ordre d'obtenir, par exemple. Ce que cela signifie, nous aurions besoin d'étendre notre projet pour inclure l'ID utilisateur dans notre commande. Mais c'est certainement quelque chose que vous allez de l'avant et faites comme un défi, si vous voulez ajouter cela au projet. Il est maintenant en place, nous pouvons appuyer sur Publier pour faire ces changements en direct. Maintenant, dans la prochaine vidéo, nous allons passer à la construction de notre application pour la production. 62. Déployer sur Netlify: La première étape vers le déploiement de notre application sur le web est de construire notre projet pour la production. Rappelez-vous, dans la dernière section, nous avons inspecté notre fichier de configuration web pack et nous avons examiné comment notre bundle est sorti dans un nouveau dossier appelé disque. Nous pouvons créer ce bundle pour la production en utilisant la commande build, que nous pouvons voir si nous allons au package.jason. Actuellement pour le développement, nous utilisons les indices. Mais maintenant, nous pouvons continuer à passer dans nos scripts de construction à l'intérieur du terminal. Allons vers le bas, et à l'intérieur du terminal, nous allons fermer notre serveur avec commande ou contrôle C. Nous pouvons ensuite exécuter npm run build, Cela nous donne quelques instants pour construire notre application pour la production. Il va également créer un nouveau dossier de disque et une fois cela fait, je reviendrai vous voir dans un instant. Une fois cela terminé à l'intérieur de la barre latérale, quand j'aurai le dossier de disque, qui contiendra une version prête à la production de notre application, contenant tous nos CSS, tous nos actifs tels que les images, et aussi notre JavaScript. Ces fichiers sont minifiés et optimisés pour la production, plus de supprimer des éléments tels que les messages d'erreur et les avertissements de siège pendant les développements. Nous pouvons maintenant prendre ce dossier et l'utiliser pour le déployer sur Netlify. Si vous allez sur netlify.com, il y a beaucoup de fournisseurs d'hébergement là-bas, mais c'est un très populaire et facile à utiliser, ce qui nous fera avancer en quelques minutes. Il a également une option gratuite que vous aviez l'habitude de. Nous pouvons rapidement mettre notre site en ligne à l'aide d'une interface de ligne de commande Netlify, qui nous donnera un ensemble de commandes pour pousser notre application à la production. Si nous revenons au terminal à l'intérieur de Visual Studio Code, nous pouvons l'installer via npm. Nous allons installer cela globalement, donc si vous êtes sur un Mac, vous devrez peut-être utiliser le pseudo mot-clé comme préfixe. Si vous êtes Windows, cela ne sera pas nécessaire, tout ce que nous avons à faire est d'installer Netlify-CLI avec l'indicateur de tiret g pour rendre cela global. J' ai déjà cela installé, donc je ne vais pas aller de l'avant et faire cela. Mais si vous ne le faites pas, allez-y et exécutez cette commande, puis donnez-lui quelques instants à installer. Une fois cela installé, la première commande que nous devons exécuter est Netlify deploy. Cela peut également s'ouvrir dans le navigateur où vous devrez peut-être vous connecter ou créer un compte si vous n'en avez pas déjà. Une fois que vous vous êtes inscrit et que vous avez vérifié votre adresse e-mail, vous serez redirigé vers la zone de compte où vous pouvez créer un nouveau projet. Vous n'avez pas besoin de le faire dans le navigateur car nous allons le faire ici à l'intérieur du terminal. Vous pouvez également être invité à autoriser l'interface de ligne de commande Netlify 2 lors de la première utilisation. Je suis déjà connecté depuis que j'ai utilisé ces nombreuses fois auparavant. De retour au terminal, nous devons répondre à quelques questions simples et nous sommes prêts à partir. La première chose que nous devons faire est d'utiliser les touches fléchées notre clavier pour descendre pour créer et configurer un nouveau site. Je n'ai qu'un nom d'équipe, donc je vais sélectionner ceci. Nous pouvons également entrer un nom de site facultatif. Je vais laisser ceci vide et permettre à Netlify de générer un nom aléatoire. Appuyez sur Entrée. Ensuite, nous devons dire à Netlify où se trouve notre dossier de construction dans nos projets et c'est simplement un disque. Avant de rendre ce site Web disponible pour le reste du monde, Netlify nous donne un projet d'URL, que nous pouvons utiliser pour tester notre site, voir si tout fonctionne bien d'abord. Je veux copier ceci et ouvrir un serveur à l'intérieur du navigateur. À première vue, tout semble bien fonctionner, nous avons la page d'accueil, nous avons le menu, nous avons notre contact et aussi nos liens sur les liens ci-dessous. Cependant, si nous tapons autre chose à la fin de notre URL, s'il s'agit de faux slash admin ou d'autres routes, cela ne fonctionnera pas. C' est parce que nous n'avons pas de pages, nous n'avons pas de route d'administration de recherche complète pour faire une demande et obtenir à partir du serveur. Puisque nous comptons sur le routeur pour basculer entre nos pages sont des composants, la solution à celui-ci en utilisant une application de page unique est de dire au serveur que nous voulons toujours retourner la page d'accueil indépendamment de toute URL qui est entré dans la barre de navigation. Cela signifie que nous récupérons toujours la page d'accueil et nous pouvons ensuite utiliser le routeur sur le front-end pour basculer d'une page à l'autre. C' est assez simple à faire. Si nous revenons à l'éditeur de texte, nous ajoutons simplement un fichier de redirection de soulignement à l'intérieur de notre répertoire de disque. Ouvrez notre disque et à l'intérieur de la route, nous pouvons créer un nouveau fichier, qui est la redirection de soulignement. Ensuite, tout ce que nous devons faire est de taper une ligne de code simple où une barre oblique et une étoile. Nous devons alors dire à Netlify de ne renvoyer toujours le fichier index.html que dans tous les cas avec un code d'état du serveur de 200. Alors, donnez-nous un coup de pouce. Maintenant, si nous retournons au terminal, nous pouvons à nouveau exécuter, Netlify déployer. Le chemin d'accès est de nouveau le dossier du disque. Nous pouvons saisir notre URL brouillon. Copiez ces, collez-le dans, tous les liens réguliers sont corrects. Cette fois, nous pouvons taper la route d'administration slash avant. Je vais maintenant dire que cela fonctionne. Nous pouvons simplement vérifier en vous connectant. Cela fonctionne également avec notre base de données. Nous pouvons voir nos éléments de menu actuels et aussi les commandes. Une fois que nous sommes heureux que tout fonctionne bien et nous pouvons enfin déployer notre application. Nous pouvons le faire simplement avec une nouvelle commande. Pour la dernière fois, nous allons lancer Netlify deploy, mais cette fois nous allons ajouter dash, dash prod à la fin pour la production. Ce qui signifie que nous sommes maintenant satisfaits de nos côtés de test et que nous voulons construire cela pour notre production. Le chemin de déploiement une fois de plus est disque, donnez-nous quelques secondes pour construire nos sites. Nous devrions maintenant voir le message de déploiement est en direct avec une URL en direct, que nous pouvons maintenant saisir et ouvrir à l'intérieur du navigateur. Si vous atteignez jusqu'ici, félicitations, c'est maintenant votre site Web, déployez-le à la production. Vous disposez également d'un lien en direct que vous pouvez partager avec d'autres. 63. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je te reverrai dans un futur cours.