鸿蒙 MVVM 实战：从 Demo 到工程化，聊聊登录、状态管理与埋点程序设计

前言

作为刚入职鸿蒙开发组的新人。我发现很多团队在项目初期会遇到以下问题：

• 代码混乱：所有业务逻辑都塞在UI组件中，导致@ComponentV2变得又重又难测试；
• 状态管理困惑：AppStorageV2和PersistenceV2看似相似但用途不同，容易混淆使用；
• 埋点数据不准：简单上报容易导致重复上报或遗漏关键场景数据；
• 路由控制不足：缺乏全局路由守卫机制导致登录拦截等功能难以实现。

一、MVVM 分层架构实践

为什么需要分层？常见痛点及方法

• Component变得过大难以维护；改一个业务逻辑要翻遍整个UI文件;
• UI和业务逻辑紧耦合，修改需求影响面大;
• 难以进行单元测试和功能隔离.

痛点描述:	方法:
采用五层架构明确职责划分; 每层只向下依赖。UI不直接调Biz，Controller不直接写UI;

登录流程示例

@HMRouter @ComponentV2 export struct Login { @Local vm: AuthViewModel = new AuthViewModel @Local controller: AuthController = new AuthController

aboutToAppear: void { // 🔥 开发者痛点解决示例 🔥 // 路由守卫：已登录直接跳首页 if ) { HMUtil.replace } }

build { Column { TextInput .onChange => { this.vm.userName = val }) Button.onClick => { this.controller.login }) } } }

⚠️ 开发建议 ⚠️

: UI组件只做两件事：

• 绑定状态；
• 抛出事件。

Controller 层设计原则

🔴 不推荐做法	🔴 推荐方法
典型错误 : 在Component里处理复杂逻辑 // 错误示例 - 把复杂逻辑放在Component里 {this.checkInput.validate.n.finally.catch}} />	正确方式 : 抽取到Controller处理 // 推荐方式 - 在Controller里集中处理 至于login，void { if return this.vm.isLoading = true this.biz.login({ userName: this.vm.userName,password: this.vm.password }) .n(result => { if return saveAuth HMUtil.replace({ navigationId: 'MainNavigation'。pageUrl:'pages/Home' }) }) .finally => { this.vm.isLoading = false }) }

二、状态管理常用方法

AppStorageV2 vs PersistenceV2 对比表格

特性\API	AppStorageV2		PersistenceV2

生命周期.

多组件共享.

持久化存储.

磁盘快照.

'✅ 常见使用场景 ✅'.

运行时需要共享且App结束后可以丢弃的数据. /b>. . . . . . . . . . .. . .. . ..& nbsp;

. ..

.

..

. .. ... ...

...... ... ............

.......................................

... . .

... ...

.. .

..... .. .. .. .. .. ....

... ... ...

...

---