• Home
Name Date Size #Lines LOC

..--

AppScope/12-May-2024-3633

entry/12-May-2024-9,9059,157

hvigor/12-May-2024-2422

screenshots/device/12-May-2024-

.gitignoreD12-May-2024110 1010

README_zh.mdD12-May-202417.6 KiB171139

build-profile.json5D12-May-20241 KiB4241

hvigorfile.tsD12-May-2024159 21

hvigorwD12-May-20242.1 KiB6428

hvigorw.batD12-May-20242 KiB7356

oh-package.json5D12-May-2024819 2725

ohosTest.mdD12-May-20243.3 KiB1916

README_zh.md

1# 状态管理
2
3### 介绍
4
5本示例通过使用[页面级的状态变量](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/arkts-localstorage.md/)和[应用级的状态变量](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/quick-start/arkts-appstorage.md/)来实现应用的状态管理。
6
7### 效果预览
8
9|主页|子组件同步父组件部分内容|爷孙组件之间状态同步|应用内全局数据与UI之间的状态同步|
10|--------------------------------|--------------------------------|--------------------------------|--------------------------------|
11|![](screenshots/device/Home.jpeg)|![](screenshots/device/ParentChildPartialContentSync.jpeg)|![](screenshots/device/DeepNestComponent.jpeg)|![](screenshots/device/ApplyGlobalDataSync.jpeg)|
12
13使用说明
14
151.点击首页中的基本类型进入对应页面，点击按钮可以更改圆形的颜色；点击查看源码可以展示基本类型功能效果的源码。
16
172.点击首页中的数组类型进入对应页面，点击新增元素可以添加数据；点击删除元素可以删除数据，当数据为空时，点击删除会弹出一个提示窗；点击更新数组中的某个元素，可以更改第一条数据的age属性，当数据为空时，同样会弹出一个提示窗；点击查看源码可以展示数组类型功能效果的源码。
18
193.点击首页中的类对象类型进入对应页面，点击更新对象可以更改对象属性和对象属性中的属性；点击更新对象属性，对象属性数据发生变化；点击更新属性中的属性，对象属性的属性数据发生变化；点击查看源码可以展示类对象类型功能效果的源码。
20
214.点击首页中的只更新所绑定的组件进入对应页面，点击修改标题和内容，标题和内容数据都发生变化，页面更新标题数据，内容数据不刷新；点击查看源码可以展示类对象类型功能效果的源码。
22
235.点击单、双向同步进入对应页面，点击设置为粉色按钮，父组件圆形颜色更新，两个子组件颜色同步更新；点击设置为蓝色按钮，子组件A圆形颜色更新，父组件和子组件B颜色不更新；点击设置为红色按钮，子组件B圆形颜色更新，父组件和子组件A圆形颜色同步更新，点击查看源码可以展示单、双向同步功能效果的源码。
24
256.点击子组件同步父组件的部分内容进入对应页面，点击父组件中的属性1修改数据，子组件中的属性1数据同步，点击子组件的属性1修改数据，父组件中的属性1数据同步，点击查看源码可以展示子组件同步父组件的部分内容功能效果的源码。
26
277.点击爷孙组件之间状态同步进入对应页面，点击爷组件下拉框组件选择颜色，下拉框文本和圆形颜色改变，孙组件下拉框文本和圆形颜色同步刷新；点击孙组件下拉框选择颜色，下拉框文本和圆形颜色改变，爷组件下拉框文本和圆形颜色同步刷新，点击查看源码可以展示爷孙组件之间状态同步功能效果的源码。
28
298.点击兄弟组件之间状态同步进入对应页面，点击兄弟A组件下拉框选择颜色，下拉框文本和圆形颜色改变，兄弟B组件下拉框文本和圆形颜色同步刷新，点击兄弟B组件下拉框选择颜色，下拉框文本和圆形颜色改变，兄弟A组件下拉框文本和圆形颜色同步刷新，点击查看源码可以展示爷孙组件之间状态同步功能效果的源码。
30
319.点击应用内全局数据与UI之间的状态同步进入对应页面，点击修改夜间模式状态和字体大小，当前夜间模式状态以及字体大小发生变化，进入Ability1和Ability2页面，夜间模式状态以及字体大小同步更新；在Ability1界面中改变夜间模式状态和字体大小，夜间模式状态和字体大小发生变化，进入到主页面和Ability2页面，夜间模式状态同步更新，字体大小不变；在Ability2界面中修改夜间模式状态，夜间模式状态发生改变，进入到主页面和Ability1页面，夜间模式状态同步，点击查看源码可以展示应用内全局数据与UI之间的状态同步功能效果的源码。
32
3310.点击Ability内全局数据与UI之间的状态同步进入对应页面，点击修改夜间模式状态和字体大小，当前夜间模式状态以及字体大小发生变化时，进入Page1和Page2以及跨Ability不同步页面，Page1和Page2夜间模式状态以及字体大小同步更新,跨Ability页面不同步更新；在Page1界面中改变夜间模式状态和字体大小，夜间模式状态和字体大小发生变化，进入到主页面、Page2和跨Ability不同步页面，主页面和Page2夜间模式状态同步更新，但是字体不发生变化，跨Ability页面夜间模式状态和字体都不同步更新；在Page2界面中修改夜间模式状态，夜间模式状态发生改变，进入到主页面、Page1页面和跨Ability不同步页面，主页和Page1夜间模式状态同步，跨Ability页面都不同步更新；在跨Ability界面中修改夜间模式状态，夜间模式状态发生改变，进入主页、Page1和Page2页面，夜间模式状态不同步，点击查看源码可以展示Ability内全局数据与UI之间的状态同步功能效果的源码。
34
35### 工程目录
36
37```
38entry/src/main/ets/
39|---commoncomponents
40|   |---CodeView.ets                                          // 代码展示组件
41|   |---TitleBar.ets                                          // 标题组件
42|   |---TitleBarDark.ets                                      // 夜间模式下标题组件
43|   |---ViewCodeText.ets                                      // 查看源码文本组件
44|---entryability
45|   |---EntryAbility.ts
46|---outofsyncability
47|   |---OutOfSyncAbility.ts
48|---MainAbility
49|---pages
50|   |---applylevelstagemanagement                             // 应用级状态管理
51|   |   |---abilityglobaldatasync                             // Ability内全局数据与UI之间的状态同步
52|   |   |   |---AbilityGlobalDataSync.ets
53|   |   |   |---AbilityGlobalDataSyncCode.ets                 // Ability内全局数据与UI之间的状态同步主页
54|   |   |   |---AbilityOutOfSyncPage.ets                      // 跨Ability页面
55|   |   |   |---LocalStorageLinkPage.ets                      // 展示LocalStorageLink效果页面
56|   |   |   |---LocalStoragePropPage.ets                      // 展示LocalStorageProp效果页面
57|   |   |---applyglobaldatasync                               // 应用内全局数据与UI之间的状态同步
58|   |   |   |---ApplyGlobalDataSync.ets
59|   |   |   |---ApplyGlobalDataSyncCode.ets                   // 应用内全局数据与UI之间的状态同步主页
60|   |   |   |---StorageLinkAbilityPage.ets                    // 展示StorageLinkAbility页面
61|   |   |   |---StoragePropAbilityPage.ets                    // 展示StoragePropAbility页面
62|   |   |---model
63|   |   |   |---AbilityConfigType.ets                         // Ability参数类型
64|   |   |   |---CommonMethods.ets                             // 公用函数启动Ability
65|   |---home
66|   |   |---data
67|   |   |   |---HomeData.ets                                  // 首页数据
68|   |   |---model
69|   |   |   |---CategoricalDataType.ets                       // 层级类型
70|   |   |---Home.ets                                          // 首页
71|   |   |---TabContentNavigation.ets                          // Tab内容区组件
72|   |---pagelevelstagemanagement                              // 页面级状态管理
73|   |   |---multicompomentssync                               // 自定义组件之间的状态同步
74|   |   |   |---brothercomponentssync                         // 兄弟组件之间状态同步
75|   |   |   |   |---BrotherComponentSync.ets
76|   |   |   |   |---BrotherComponentSyncCode.ets              // 兄弟组件之间状态同步首页
77|   |   |   |   |---ConsumeBrotherOneComponent.ets            // @Consume状态变量组件
78|   |   |   |   |---ConsumeBrotherTwoComponent.ets            // @Consume状态变量组件
79|   |   |   |   |---LinkBrotherOneComponent.ets               // @Link状态变量组件
80|   |   |   |   |---LinkBrotherTwoComponent.ets               // @Link状态变量组件
81|   |   |   |   |---ProvideAndConsumeSync.ets                 // @Privide状态变量组件
82|   |   |   |   |---StateAndLinkSync.ets                      // @State状态变量组件
83|   |   |   |---data
84|   |   |   |   |---ColorData.ets                             // 颜色数据
85|   |   |   |---deepnestcomponentssync                        // 爷孙组件嵌套
86|   |   |   |   |---ConsumeDescendentComponent.ets            // @Consume孙组件
87|   |   |   |   |---DeepNestComponentsSync.ets
88|   |   |   |   |---DeepNestComponentsSyncCode.ets            // 爷孙组件首页
89|   |   |   |   |---LinkDescendentComponent.ets               // @Link孙组件
90|   |   |   |   |---ProvideAndConsumeSync.ets                 // @Provide爷组件
91|   |   |   |   |---StateAndLinkSync.ets                      // @State爷组件
92|   |   |   |---model
93|   |   |   |   |---ColorType.ets                             // 颜色数据类型
94|   |   |   |---parentchildcomponentsync                      // 父子组件之间状态同步
95|   |   |   |   |---parentchildpartialcontentsync             // 子组件同步父组件部分内容
96|   |   |   |   |   |---ObjectLinkComponent.ets               // @ObjectLink子组件
97|   |   |   |   |   |---ParentChildPartialContentSync.ets
98|   |   |   |   |   |---ParentChildPartialContentSyncCode.ets // @Observer父组件
99|   |   |   |   |---uniandbidirectionsync                     // 单、双向同步
100|   |   |   |   |   |---ComponentLink.ets                     // Link组件
101|   |   |   |   |   |---ComponentProp.ets                     // Prop组件
102|   |   |   |   |   |---UniAndBidirectionSync.ets
103|   |   |   |   |   |---UniAndBidirectionSyncCode.ets         // @State父组件
104|   |   |---singlecomponentstatevariables                     // 单组件的状态同步
105|   |   |   |---decoratedobjecttype                           // 修饰的对象类型
106|   |   |   |   |---arraytype                                 // 数组类型
107|   |   |   |   |   |---ArrayType.ets
108|   |   |   |   |   |---ArrayTypeCode.ets                     // 数组类型源码页
109|   |   |   |   |---basetype                                  // 基本类型
110|   |   |   |   |   |---BaseType.ets
111|   |   |   |   |   |---BaseTypeCode.ets                      // 基本类型源码页
112|   |   |   |   |---classobjecttype                           // 对象类型
113|   |   |   |   |   |---ClassObjectType.ets
114|   |   |   |   |   |---ClassObjectTypeCode.ets               // 对象类型源码页
115|   |   |   |---updatetactics                                 // 更新原理
116|   |   |   |   |---updateboundcomponent                      // 只更新所绑定的组件
117|   |   |   |   |   |---UpdateBoundComponent.ets
118|   |   |   |   |   |---UpdateBoundComponentCode.ets          // 只更新所绑定的组件源码
119|---storagelinkability
120|   |---StorageLinkAbility.ts
121|---storagepropability
122|   |---StoragePropAbility.ts
123|---utils
124|   |---Logger.ts                                             // 日志文件
125|   |---ResourceUtils.ts                                      // 资源转换方法
126|   |---StartAbilityUtils.ts                                  // 启动Ability方法
127
128```
129
130### 具体实现
131
132* 查看源码：通过private controller: webView.WebviewController = new webView.WebviewController()声明一个状态变量，使用this.controller.loadUrl(url)来打开web页面，查看对应的源码。
133* 基本类型：使用@State声明一个Resource类型的circleColor状态变量，然后通过点击事件根据circleColor的id来改变圆形颜色。
134* 数组类型：使用@State声明一个数组arrayTypeData状态变量，数据元素为new ArrayDataType()，通过arrayTypeData.push()方法来新增元素数据，arrayTypeData.splice()方法删除元素，更新指定new ArrayDataType()来实现更新某一个元素数据。
135* 类对象类型：使用@Observerd声明一个属性类ChildClass，然后声明一个对象类ParentClass，并将对象的其中一个属性类型设置为属性类，使用@State声明一个类对象数据状态变量classObjectData，更新对象可以通过new ParentClass()生成一个对象并赋值来实现，更新对象属性可以通过this.classOjectData.attribute++来实现，更新对象属性的属性可以通过@ObjectLink声明一个状态变量并更新此状态变量的对象属性来实现。
136* 只更新所绑定的组件：使用@State和Private声明一个titleName和content状态变量，通过点击事件修改这两个状态变量。
137* 单、双向同步：父组件使用@State声明一个状态变量circleColor并作为参数给子组件A和子组件B，子组件A通过@Prop接收，子组件B通过@Link来接收，通过点击事件中的this.circleColor = COLOR_DATA.PINK来更改颜色。
138* 子组件同步父组件部分内容：父组件中使用@State声明一个数组状态变量parentData，@Observed声明数组元素的类，父组件向子组件传递parentData的某一个元素数据，子组件通过@ObjectLink来接收，父组件通过this.childObject.attributeType = value来修改元素数据，子组件同步更新，子组件同样通过this.childObjectData.attributeType = value来修改子组件的数据，父组件同步更新。
139* 爷孙组件之间状态同步：爷组件通过@State声明一个控制圆形颜色的状态变量circleColor和控制当前Select组件Index的状态变量currentSelectIndex，逐层传递给子组件给孙组件，通过@Link接收，爷组件通过onSelect事件来修改circleColor和currentSelectIndex，孙组件同样通过onSelect事件来修改circleColor和currentSelectIndex，然后爷组件通过@Provide声明一个控制圆形颜色的状态变量consumeCircleColor和控制当前Select组件Index的状态变量currentSelectIndex，孙组件通过@Consume来接收，爷组件通过onSelect事件来修改circleColor和currentSelectIndex，孙组件同样通过onSelect事件来修改circleColor和currentSelectIndex。
140* 兄弟组件之间状态同步：父组件通过@State声明一个控制圆形颜色的状态变量circleColor和控制当前Select组件Index的状态变量currentSelectIndex，传递给子组件A和子组件B，两者通过@Link接收，子组件A通过onSelect事件来修改circleColor和currentSelectIndex，子组件B同样通过onSelect事件来修改circleColor和currentSelectIndex；然后父组件通过@Provide声明一个控制圆形颜色的状态变量consumeCircleColor和控制当前Select组件Index的状态变量currentSelectIndex，子组件A和子组件B通过@Consume来接收，子组件A通过onSelect事件来修改circleColor和currentSelectIndex，，子组件B同样通过onSelect事件来修改circleColor和currentSelectIndex。
141* 应用内全局数据与UI之间的状态同步：主页、Ability1页面和Ability2页面通过@StorageLink声明一个控制夜间模式的状态变量currentModelStatus，在主页面通过onChange事件中的AppStorage.SetOrCreate<boolean>('currentModelStatus', this.currentModelStatus)来更改夜间模式的状态，，在Ability1页面和Ability页面通过onClick事件中的this.currentModelStatus = !this.currentModelStatus，主页和Ability2页面通过@StorageLink声明一个控制字体大小的状态变量contentFontSize，Ability1页面通过@StorageProp声明一个控制字体大小的状态变量contentFontSize，主页使用onChange事件中的this.contentFontSize = value和AppStorage.SetOrCreate<number>('contentFontSize', this.contentFontSize)来更改内容字体的大小，Ability1通过onChange事件中的this.contentFontSize = value来修改内容字体大小。
142* Ability内全局数据与UI之间的状态同步：在Entry当中声明一个storage，并通过this.storage.setOrCreate<boolean>('currentModelStatus', true)和this.storage.setOrCreate<number>('contentFontSize', 18)来设置夜间模式状态变量currentModelStatus和字体大小状态变量contentFontSize，然后主页、Page1页面、Page2页面和跨Ability页面通过@LocalStorageLink声明一个控制夜间模式的状态变量currentModelStatus，在主页面通过onChange事件中的this.currentModelStatus = isOn来更改夜间模式的状态，Page1页面、Page2页面和跨Ability页面通过onClick事件中的this.currentModelStatus = !this.currentModelStatus来更改夜间模式的状态，主页、Page1页面和跨Ability页面通过@LocalStorageLink声明一个控制字体大小的状态变量contentFontSize，Page1页面通过@LocalStorageProp声明一个控制字体大小的状态变量contentFontSize，主页使用onChange事件中的this.contentFontSize = value和AppStorage.SetOrCreate<number>('contentFontSize', this.contentFontSize)来更改内容字体的大小，Page2通过onChange事件中的this.contentFontSize = value来修改内容字体大小。
143
144### 相关权限
145
146不涉及。
147
148### 依赖
149
150不涉及。
151
152### 约束与限制
153
1541.本示例仅支持标准系统上运行。
155
1562.本示例已适配API version 9版本SDK，版本号：4.0.5.2。
157
1583.本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)才可编译运行。
159
160### 下载
161
162如需单独下载本工程，执行如下命令：
163
164```
165git init
166git config core.sparsecheckout true
167echo code/UI/StateManagement/ > .git/info/sparse-checkout
168git remote add origin https://gitee.com/openharmony/applications_app_samples.git
169git pull origin master
170
171```