The decorators described in the previous topics are used to share state variables within a page, that is, within a component tree. If you want to share state data at the application level or across multiple pages, you would need to apply application-level state management. ArkTS provides a wide variety of application state management capabilities:
-[LocalStorage](arkts-localstorage.md): API for storing the UI state, usually used for state sharing within a [UIAbility](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md) or between pages.
-[LocalStorage](arkts-localstorage.md): API for storing the UI state, usually used for state sharing within a [UIAbility](../reference/apis/js-apis-app-ability-uiAbility.md) or between pages.
-[AppStorage](arkts-appstorage.md): special, singleton LocalStorage object within the application, which is created by the UI framework at application startup and provides the central storage for application UI state attributes.
-[PersistentStorage](arkts-persiststorage.md): API for persisting application attributes. It is usually used together with AppStorage to persist selected AppStorage attributes to the disk so that their values are the same upon application re-start as they were when the application was closed.
-[Environment](arkts-environment.md): a range of environment parameters regarding the device where the application runs. The environment parameters are synchronized to the AppStorage and can be used together with the AppStorage.
-[Environment](arkts-environment.md): a range of environment parameters regarding the device where the application runs. The environment parameters are synchronized to AppStorage and can be used together with AppStorage.
@@ -52,6 +52,51 @@ An application can request to be notified whenever the value of the \@Watch deco
## Application Scenarios
### \@Watch and Custom Component Update
This example is used to clarify the processing steps of custom component updates and \@Watch. **count** is decorated by \@State in **CountModifier** and \@Prop in **TotalView**.
```ts
@Component
structTotalView{
@Prop@Watch('onCountUpdated')count:number;
@Statetotal:number=0;
// @Watch cb
onCountUpdated(propName:string):void{
this.total+=this.count;
}
build(){
Text(`Total: ${this.total}`)
}
}
@Entry
@Component
structCountModifier{
@Statecount:number=0;
build(){
Column(){
Button('add to basket')
.onClick(()=>{
this.count++
})
TotalView({count:this.count})
}
}
}
```
Processing steps:
1. The click event **Button.onClick** of the **CountModifier** custom component increases the value of **count**.
2. In response to the change of the @State decorated variable **count**, \@Prop in the child component **TotalView** is updated, and its **\@Watch('onCountUpdated')** callback is triggered, which updates the **total** variable in **TotalView**.
3. The **Text** component in the child component **TotalView** is re-rendered.
### Combination of \@Watch and \@Link
...
...
@@ -124,52 +169,6 @@ The processing procedure is as follows:
2. The value of the \@Link decorated variable **BasketViewer shopBasket** changes.
3. The state management framework calls the \@Watch callback **BasketViewer onBasketUpdated** to update the value of **BaketViewer TotalPurchase**.
3. The state management framework calls the \@Watch callback **BasketViewer onBasketUpdated** to update the value of **BasketViewer TotalPurchase**.
4. Because \@Link decorated shopBasket changes (a new item is added), the ForEach component executes the item Builder to render and build the new item. Because the @State decorated totalPurchase variables changes, the **Text** component is also re-rendered. Re-rendering happens asynchronously.
### \@Watch and Custom Component Update
This example is used to clarify the processing steps of custom component updates and \@Watch. **count** is decorated by \@State in **CountModifier** and \@Prop in **TotalView**.
```ts
@Component
structTotalView{
@Prop@Watch('onCountUpdated')count:number;
@Statetotal:number=0;
// @Watch cb
onCountUpdated(propName:string):void{
this.total+=this.count;
}
build(){
Text(`Total: ${this.total}`)
}
}
@Entry
@Component
structCountModifier{
@Statecount:number=0;
build(){
Column(){
Button('add to basket')
.onClick(()=>{
this.count++
})
TotalView({count:this.count})
}
}
}
```
Processing steps:
1. The click event **Button.onClick** of the **CountModifier** custom component increases the value of **count**.
2. In response to the change of the @State decorated variable **count**, \@Prop in the child component **TotalView** is updated, and its **\@Watch('onCountUpdated')** callback is triggered, which updates the **total** variable in **TotalView**.
3. The **Text** component in the child component **TotalView** is re-rendered.
