Création d'une connexion avec Vue.js et Vuex

Introduction

Dans ce projet, vous allez apprendre à construire une fonctionnalité de connexion à l'aide de Vue.js et de Vuex. Le projet vise à vous aider à comprendre l'intégration des composants Vue.js avec un système de gestion d'état basé sur Vuex.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment comprendre la structure du projet et le rôle de chaque fichier
• Comment identifier le problème dans la fonction de connexion
• Comment corriger la fonction de connexion en modifiant le magasin Vuex et le composant Vue

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Comprendre comment structurer un projet Vue.js avec Vuex
• Appliquer Vuex pour gérer l'état de l'application
• Dépanner et corriger les problèmes dans une application Vue.js
• Intégrer Vuex avec les composants Vue.js

Skills Graph

Comprendre la structure du projet

Dans cette étape, vous allez découvrir la structure du projet et les fichiers impliqués dans la fonctionnalité de connexion.

La structure du répertoire du projet est la suivante :

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

Les fichiers clés et leurs rôles sont les suivants :

1. index.html : C'est le fichier HTML principal qui sert de point d'entrée de l'application.
2. components/login.js : Ce fichier contient le composant Vue pour la page de connexion.
3. components/panel.js : Ce fichier contient le composant Vue pour le panneau de bienvenue.
4. store/BaseModule.js : Ce fichier définit le module de base Vuex.
5. store/UserModule.js : Ce fichier définit le module Vuex pour les données et les actions liées à l'utilisateur.
6. store/index.js : Ce fichier combine les modules Vuex et crée le magasin Vuex.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page et la page initiale est la suivante :

Identifier le problème

Le problème est que la fonction de connexion ne fonctionne pas comme prévu. Après avoir entré le nom d'utilisateur et cliqué sur le bouton "Confirmer", les données changent, mais la page de connexion est toujours affichée et la page de bienvenue n'est pas affichée correctement.

Pour identifier le problème, vous devez lire attentivement le code associé dans le dossier store, en particulier le fichier UserModule.js, et le combiner avec vos connaissances sur Vuex.

Corriger la fonction de connexion

1. Ouvrez le fichier index.html et localisez la section TODO dans la balise <script>.

2. Dans la section computed, changez les attributs comme suit :

   computed: {
     welcome() {
       return store.getters.welcome;
     },
     username() {
       return store.getters["user/username"];
     },
     token() {
       return store.getters["user/token"];
     }
   },

   Ces propriétés calculées vous permettront d'accéder aux données nécessaires dans le magasin Vuex.

3. Dans la section methods, mettez à jour la méthode login comme suit :

   methods: {
     login(username) {
       if (username) {
         store.commit("user/login", {
           username,
           token: "sxgWKnLADfS8hUxbiMWyb"
         });
         store.commit("say", "Logged in successfully, welcome back!");
       }
     }
   }

   Cette méthode login mise à jour commettra les actions nécessaires dans le magasin Vuex pour mettre à jour l'état de connexion de l'utilisateur et afficher le message de bienvenue.

Tester la fonctionnalité de connexion

1. Enregistrez les modifications dans le fichier index.html.
2. Raffraîchissez la page web dans votre navigateur.
3. Entrez le nom d'utilisateur "admin" et cliquez sur le bouton "Confirmer".
4. Vous devriez maintenant voir le panneau de bienvenue affiché, comme montré dans l'image "Completed Effect".

Félicitations! Vous avez réussi à corriger la fonction de connexion et effectué les modifications nécessaires au code.

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.