简介 在这个项目中,你将学习如何使用Vue.js和Vuex构建登录功能。该项目旨在帮助你理解Vue.js组件与基于Vuex的状态管理系统的集成。 👀 预览 🎯 任务 在这个项目中,你将学习: 如何理解项目结构以及每个文件的作用 如何识别登录功能中的问题 如何通过修改Vuex存储和Vue组件来修复登录功能 🏆 成果 完成这个项目后,你将能够: 理解如何使用Vuex构建Vue.js项目的结构 应用Vuex来管理应用程序状态 排查和修复Vue.js应用程序中的问题 将Vuex与Vue.js组件集成 Skills Graph %%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/templating("`HTML Templating`") subgraph Lab Skills html/head_elems -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/layout -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/forms -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/form_valid -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/form_access -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/inter_elems -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} html/templating -.-> lab-445761{{"`使用Vue.js和Vuex构建登录功能`"}} end
了解项目结构 在这一步中,你将了解项目结构以及登录功能所涉及的文件。 项目目录结构如下: ├── 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”,然后点击“确认”按钮。 此时你应该会看到显示出欢迎面板,如“完成效果”图片所示。 恭喜!你已成功修复登录功能并对代码进行了必要的修改。