Construir un inicio de sesión con Vue.js y Vuex

Introducción

En este proyecto, aprenderás a construir una funcionalidad de inicio de sesión utilizando Vue.js y Vuex. El objetivo del proyecto es ayudarte a entender la integración de los componentes de Vue.js con un sistema de gestión de estado basado en Vuex.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo entender la estructura del proyecto y el papel de cada archivo
• Cómo identificar el problema en la función de inicio de sesión
• Cómo corregir la función de inicio de sesión modificando la tienda Vuex y el componente Vue

🏆 Logros

Después de completar este proyecto, podrás:

• Entender cómo estructurar un proyecto de Vue.js con Vuex
• Aplicar Vuex para administrar el estado de la aplicación
• Solucionar problemas y corregir errores en una aplicación de Vue.js
• Integrar Vuex con los componentes de Vue.js

Comprende la estructura del proyecto

En este paso, aprenderás sobre la estructura del proyecto y los archivos involucrados en la funcionalidad de inicio de sesión.

La estructura del directorio del proyecto es la siguiente:

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

Los archivos clave y sus roles son:

1. index.html: Este es el archivo HTML principal que sirve como punto de entrada de la aplicación.
2. components/login.js: Este archivo contiene el componente Vue para la página de inicio de sesión.
3. components/panel.js: Este archivo contiene el componente Vue para el panel de bienvenida.
4. store/BaseModule.js: Este archivo define el módulo base de Vuex.
5. store/UserModule.js: Este archivo define el módulo de Vuex para los datos y acciones relacionados con el usuario.
6. store/index.js: Este archivo combina los módulos de Vuex y crea la tienda de Vuex.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página y la página inicial es la siguiente:

Identifica el problema

El problema es que la función de inicio de sesión no funciona como se esperaba. Después de ingresar el nombre de usuario y hacer clic en el botón "Confirmar", los datos cambian, pero la página de inicio de sesión sigue siendo mostrada y la página de bienvenida no se muestra correctamente.

Para identificar el problema, debes leer detenidamente el código relacionado en la carpeta store, especialmente el archivo UserModule.js, y combinarlo con tus conocimientos de Vuex.

Corrige la función de inicio de sesión

1. Abra el archivo index.html y localice la sección TODO en la etiqueta <script>.

2. En la sección computed, cambie a los siguientes atributos:

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

   Estas propiedades calculadas te permitirán acceder a los datos necesarios desde la tienda Vuex.

3. En la sección methods, actualice el método login de la siguiente manera:

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

   Este método login actualizado hará commit de las acciones necesarias a la tienda Vuex para actualizar el estado de inicio de sesión del usuario y mostrar el mensaje de bienvenida.

Prueba la funcionalidad de inicio de sesión

1. Guarde los cambios en el archivo index.html.
2. Actualice la página web en su navegador.
3. Ingrese el nombre de usuario "admin" y haga clic en el botón "Confirmar".
4. Ahora debería ver el panel de bienvenida mostrado, como se muestra en la imagen "Efecto completado".

¡Felicitaciones! Ha corrregido con éxito la función de inicio de sesión y realizado las modificaciones necesarias en el código.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.