Earthworm 项目中课程切换时的 Loading 状态优化方案

在 Earthworm 这个在线学习平台项目中，用户在不同课程之间切换时，有时会出现没有显示 Loading 状态的体验问题。这个问题主要发生在从结算页面进入下一关时，以及其他一些特定场景下。

问题背景分析

当前系统的 Loading 状态显示机制是基于 Game 视图中是否存在 currentStatement.id 来判断的。这种设计导致了一个潜在问题：由于 courseStore 中的 currentStatement（当前题目信息）在切换时被保留，系统误认为不需要显示 Loading 状态，从而造成了用户体验上的不连贯。

技术实现现状

在现有的代码架构中：

1. 课程状态管理集中在 courseStore 中
2. 视图层通过检查 currentStatement.id 来决定是否显示 Loading
3. 数据获取和状态更新之间存在一定的异步延迟

解决方案探讨

针对这个问题，技术团队提出了两个可行的优化方案：

方案一：课程信息重置

这个方案的核心思想是在课程切换时，主动重置 courseStore 中的课程信息。具体实现步骤包括：

1. 在路由切换前触发重置操作
2. 清空 currentStatement 及相关状态
3. 强制系统重新获取新课程数据

优点：

• 实现简单直接
• 符合状态管理的常规做法
• 能够确保 Loading 状态正确显示

缺点：

• 需要修改多个状态管理点
• 可能影响其他依赖这些状态的组件

方案二：统一拦截控制

这个方案采用更系统化的方法，在 Main/[id].vue 组件中进行统一拦截：

1. 默认设置 isLoading 状态为 true
2. 等待 coursesStore.setup() 完成数据获取
3. 数据就绪后将 isLoading 设置为 false

优点：

• 集中化管理加载状态
• 减少对现有业务逻辑的侵入
• 更容易维护和扩展

缺点：

• 需要重构部分组件逻辑
• 可能增加初始渲染的复杂性

技术选型建议

对于 Earthworm 这样的教育类项目，用户体验的连贯性至关重要。综合考虑后，方案二可能是更优的选择，因为它：

1. 提供了更一致的加载体验
2. 减少了状态管理的复杂度
3. 更易于应对未来的需求变化

实现细节考虑

如果采用方案二，需要注意以下技术细节：

1. 异步操作的错误处理机制
2. 加载超时的兜底方案
3. 动画效果的平滑过渡
4. 与现有路由守卫的兼容性

总结

Earthworm 项目中课程切换时的 Loading 状态问题，反映了前端状态管理与用户体验之间的微妙平衡。通过系统性地分析问题根源并评估解决方案，我们可以找到既保持代码整洁又能提升用户体验的优化路径。方案二的统一拦截控制方法，为这类问题提供了可扩展的解决框架，值得在实际开发中实施和验证。