• Home
Name Date Size #Lines LOC

..--

AppScope/22-Oct-2025-3633

entry/22-Oct-2025-2,1611,982

hvigor/22-Oct-2025-3937

screenshots/22-Oct-2025-

.gitignoreD22-Oct-2025133 1212

README.mdD22-Oct-20252.7 KiB7263

build-profile.json5D22-Oct-20251.4 KiB5958

code-linter.json5D22-Oct-2025960 3635

hvigorfile.tsD22-Oct-2025845 235

oh-package.json5D22-Oct-2025837 2725

README.md

1# MVVM模式(状态管理V2)示例
2
3### 介绍
4本教程通过一个简单的待办事项应用示例,逐步引入了状态管理V2装饰器,并通过代码重构实现了MVVM架构。最终,将数据、逻辑和视图分层,使得代码结构更加清晰、易于维护。
5
6### 效果预览
7|TodoList页面                                   |
8|----------------------------------------------|
9|![todolist](./screenshots/MVVMV2-todolist.gif)|
10
11使用说明
121. 点击任务切换任务完成状态;
132. 点击删除、输入添加新任务完成任务增删;
143. 点击全部完成、全部未完成更新所有任务完成状态;
154. 点击设置,更新是否显示已完成任务。
16
17### 工程目录
18```
19/src
20├── /main
21│   ├── /ets
22│   │   ├── /entryability
23│   │   ├── /model                       //重构后的Model层
24│   │   │   ├── TaskListModel.ets
25│   │   │   └── TaskModel.ets
26│   │   ├── /pages                       //通过状态管理V2版本实现ViewModel
27│   │   │   ├── 1-Basic.ets
28│   │   │   ├── 2-Local.ets
29│   │   │   ├── 3-Param.ets
30│   │   │   ├── 4-Event.ets
31│   │   │   ├── 5-Repeat.ets
32│   │   │   ├── 6-ObservedV2Trace.ets
33│   │   │   ├── 7-MonitorComputed.ets
34│   │   │   ├── 8-AppStorageV2.ets
35│   │   │   ├── 9-PersistenceV2.ets
36│   │   │   ├── 10-Builder.ets
37│   │   │   ├── SettingPage.ets          //设置页
38│   │   │   └── TodoListPage.ets         //重构后的主页面
39│   │   ├── /settingability
40│   │   ├── /view                        //重构后的View层
41│   │   │   ├── BottomView.ets
42│   │   │   ├── ListView.ets
43│   │   │   └── TitleView.ets
44│   │   ├── /viewmodel                   //重构后的ViewModel层
45│   │   │   ├── TaskListViewModel.ets
46│   │   │   └── TaskViewModel.ets
47│   └── /resources
48│       ├── ...
49├─── ...
50```
51
52### 相关权限
53不涉及。
54
55### 依赖
56不涉及。
57
58### 约束与限制
591. 本示例仅支持标准系统上运行,支持设备:RK3568;
602. 本示例为Stage模型,已适配API12版本SDK,SDK版本号5.0.0.71;
613. 本示例需要使用DevEco Studio 版本号(5.0.3.900)版本才可编译运行。
62
63### 下载
64如需单独下载本工程,执行如下命令:
65```
66git init
67git config core.sparsecheckout true
68echo code/DocsSample/ArkUISample/StateMgmtV2MVVM > .git/info/sparse-checkout
69git remote add origin https://gitee.com/openharmony/applications_app_samples.git
70git pull origin master
71```
72