ts-ui-state-mgmt-concepts.md 2.0 KB
Newer Older
G
ge-yafang 已提交
1
# Basic Concepts
Z
zengyawen 已提交
2 3


G
ge-yafang 已提交
4
In the declarative UI programming paradigm, the UI is a function in the specific application state, and you update a UI by modifying the current application state. The development framework provides comprehensive application state management capabilities, as shown in the figure below.
Z
zengyawen 已提交
5 6


G
ge-yafang 已提交
7
![en-us_image_0000001222967768](figures/en-us_image_0000001222967768.png)
Z
zengyawen 已提交
8

E
esterzhou 已提交
9

G
ge-yafang 已提交
10
## State Variable Decorators
E
esterzhou 已提交
11

G
ge-yafang 已提交
12 13 14
- @State: state attribute of the component. Each time the @State decorated variable changes, the component re-renders and updates the UI.
- @Link: allows a component to depend on some state attributes of its parent component. Each time the data in one component is updated, the state of the other component is updated, and the parent and child components are rendered again.
- @Prop: works in a way similar to that of @Link. The difference is that the changes made by a child component are not synchronized to the parent component.
E
ester.zhou 已提交
15 16 17
> **NOTE**
>
> The state variable cannot use an ID as its name, as in **@Prop id:number**.  
Z
zengyawen 已提交
18 19


G
ge-yafang 已提交
20
## Application State Data
Z
zengyawen 已提交
21

G
ge-yafang 已提交
22 23 24 25 26 27 28
AppStorage is the central store of the application states in the entire UI. The UI framework creates a singleton AppStorage object for the application and provides the corresponding decorators and APIs for the application.

- @StorageLink: works in a way similar to that of @Consume. The difference is that the link object with the specified name is obtained from the AppStorage. It establishes two-way binding between the UI component and AppStorage to synchronize data.

- @StorageProp: synchronizes UI component attributes with the AppStorage unidirectionally. That is, the value change in the AppStorage will trigger an update of the corresponding UI component, but the change of the UI component will not cause an update of the attribute value in the AppStorage.

- Service logic implementation API: adds, reads, modifies, or deletes the state attributes of applications. The changes made by this API will be synchronized to the UI component for UI update.