Vue应用程序开发（第2版）课件 第8章Vuex第5节章节案例.pptxVIP

第8章：Vuex《Vue应用程序开发》

010203005Part18.1Vuex概述Part28.2Vuex的安装Part38.3Vuex的基本用法Part48.4Vuex的复杂用法目录CONTENTSPart58.5章节案例

8.5【章节案例】1.项目需求本案例在已有Vuex状态管理的基础上实现一个虚拟用户管理系统。该系统允许手动模拟增加已登录人数或未登录人数，并实时反映在线总人数的变化。同时，用户的实际登录与退出操作也会同步更新在线总人数。通过本案例，可直观验证Vuex作为全局状态中心在多组件间共享和同步数据的能力。

8.5【章节案例】2．案例设计如下结构：（1）Vuex状态设计本案例需定义以下核心状态。①isLogin：当前用户是否已登录（布尔值）。②in：当前已登录人数（含真实用户和虚拟用户）。③out：当前未登录人数（含虚拟游客）。④count：独立计数器，用于验证状态响应性。⑤allNum：in+out，用于表示系统当前总在线人数。（2）全局导航组件FNav在页面顶部固定显示所有关键状态（如count、out、allNum、isLogin），无论切换到哪个页面，都能实时看到Vuex中状态的同步更新效果。（3）功能页面划分本案例包含以下3个页面。①首页（/）：提供计数器，验证基础状态变更。②登录页（/login）：切换登录/退出状