使用 Vue.js 构建登录功能 | Vuex 教程

介绍

在这个项目中，你将学习如何使用 Vue.js 和 Vuex 构建登录功能。该项目旨在帮助你理解 Vue.js 组件与基于 Vuex 的状态管理系统的集成。

👀 预览

Vue 登录功能预览

🎯 任务

在这个项目中，你将学习：

如何理解项目结构以及每个文件的作用
如何识别登录功能中的问题
如何通过修改 Vuex 存储和 Vue 组件来修复登录功能

🏆 成果

完成这个项目后，你将能够：

理解如何使用 Vuex 构建 Vue.js 项目的结构
应用 Vuex 来管理应用程序状态
排查和修复 Vue.js 应用程序中的问题
将 Vuex 与 Vue.js 组件集成

了解项目结构

在这一步中，你将了解项目结构以及登录功能所涉及的文件。

项目目录结构如下：

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

关键文件及其作用如下：

index.html：这是主要的 HTML 文件，是应用程序的入口点。
components/login.js：此文件包含登录页面的 Vue 组件。
components/panel.js：此文件包含欢迎面板的 Vue 组件。
store/BaseModule.js：此文件定义了基础的 Vuex 模块。
store/UserModule.js：此文件定义了与用户相关的数据和操作的 Vuex 模块。
store/index.js：此文件合并 Vuex 模块并创建 Vuex 存储。

点击 WebIDE 右下角的“Go Live”按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新以查看页面，初始页面如下：

初始效果

找出问题

问题在于登录功能未按预期工作。输入用户名并点击“确认”按钮后，数据发生了变化，但登录页面仍显示，欢迎页面未正确显示。

为了识别问题，你需要仔细阅读store文件夹中的相关代码，特别是UserModule.js文件，并结合你对 Vuex 的了解。

修复登录功能

打开index.html文件，在<script>标签中找到TODO部分。

在computed部分，修改为以下属性：

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

这些计算属性将允许你从 Vuex 存储中访问必要的数据。

在methods部分，将login方法更新如下：

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

这个更新后的login方法将向 Vuex 存储提交必要的操作，以更新用户的登录状态并显示欢迎消息。

测试登录功能

将对index.html文件所做的更改保存。
在浏览器中刷新网页。
输入用户名“admin”，然后点击“确认”按钮。
此时你应该会看到显示出欢迎面板，如“完成效果”图片所示。

完成效果

恭喜！你已成功修复登录功能并对代码进行了必要的修改。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。