Building Login with Vue.js and Vuex

Introduction

In this project, you will learn how to build a login functionality using Vue.js and Vuex. The project aims to help you understand the integration of Vue.js components with a Vuex-based state management system.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to understand the project structure and the role of each file
• How to identify the issue in the login function
• How to fix the login function by modifying the Vuex store and the Vue component

🏆 Achievements

After completing this project, you will be able to:

• Understand how to structure a Vue.js project with Vuex
• Apply Vuex to manage the application state
• Troubleshoot and fix issues in a Vue.js application
• Integrate Vuex with Vue.js components

Skills Graph

Understand the Project Structure

In this step, you will learn about the project structure and the files involved in the login functionality.

The project directory structure is as follows:

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

The key files and their roles are:

1. index.html: This is the main HTML file that serves as the entry point of the application.
2. components/login.js: This file contains the Vue component for the login page.
3. components/panel.js: This file contains the Vue component for the welcome panel.
4. store/BaseModule.js: This file defines the base Vuex module.
5. store/UserModule.js: This file defines the Vuex module for user-related data and actions.
6. store/index.js: This file combines the Vuex modules and creates the Vuex store.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and manually refresh it to see the page and the initial page is as follows:

Identify the Issue

The issue is that the login function is not working as expected. After entering the username and clicking the "Confirm" button, the data changes, but the login page is still displayed, and the welcome page is not shown correctly.

To identify the issue, you need to carefully read the related code in the store folder, especially the UserModule.js file, and combine it with your knowledge of Vuex.

Fix the Login Function

1. Open the index.html file and locate the TODO section in the <script> tag.

2. In the computed section, change to the following attributes:

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

   These computed properties will allow you to access the necessary data from the Vuex store.

3. In the methods section, update the login method as follows:

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

   This updated login method will commit the necessary actions to the Vuex store to update the user's login status and display the welcome message.

Test the Login Functionality

1. Save the changes to the index.html file.
2. Refresh the web page in your browser.
3. Enter the username "admin" and click the "Confirm" button.
4. You should now see the welcome panel displayed, as shown in the "Completed Effect" image.

Congratulations! You have successfully fixed the login function and made the necessary modifications to the code.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.