diff --git a/en/application-dev/quick-start/arkts-persiststorage.md b/en/application-dev/quick-start/arkts-persiststorage.md index 303402ac5a2dffe2537fa4b252a21fcfe31631ad..fdbacd4235dcd50ea2777e8e3695227ff02be70c 100644 --- a/en/application-dev/quick-start/arkts-persiststorage.md +++ b/en/application-dev/quick-start/arkts-persiststorage.md @@ -92,7 +92,7 @@ struct Index { 1. The state variable **\@StorageLink('aProp') aProp** is updated, triggering the **\** component to be re-rendered. 2. The two-way synchronization between the \@StorageLink decorated variable and AppStorage results in the change of the **\@StorageLink('aProp') aProp** being synchronized back to AppStorage. 3. The change of the **aProp** attribute in AppStorage triggers any other one-way or two-way bound variables to be updated. (In this example, there are no such other variables.) - 4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its changed value to the device disk. + 4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its new value to the device disk. - Subsequent application running: 1. **PersistentStorage.PersistProp('aProp', 47)** is called. A search for the **aProp** attribute on the PersistentStorage disk succeeds. diff --git a/en/application-dev/quick-start/arkts-state.md b/en/application-dev/quick-start/arkts-state.md index be3260d6855bdb72a8e38fbaea31307117ec091b..ccbf348f847f61efc034d2a6347f7390d4b6f558 100644 --- a/en/application-dev/quick-start/arkts-state.md +++ b/en/application-dev/quick-start/arkts-state.md @@ -25,21 +25,21 @@ An @State decorated variable, like all other decorated variables in the declarat ## Rules of Use -| \@State Decorator| Description | -| ------------ | ---------------------------------------- | -| Decorator parameters | None. | -| Synchronization type | Does not synchronize with any type of variable in the parent component. | -| Allowed variable types | Object, class, string, number, Boolean, enum, and array of these types. For details about the scenarios of nested types, see [Observed Changes](#observed-changes).
The type must be specified.
**any** is not supported. A combination of simple and complex types is not supported. The **undefined** and **null** values are not allowed.
**NOTE**
Avoid using this decorator to decorate the Date type, as doing so may lead to unexpected behavior of the application.
The Length, ResourceStr, and ResourceColor types are a combination of simple and complex types and therefore not supported.| -| Initial value for the decorated variable | Mandatory. | +| \@State Decorator | Description | +| ------------------ | ------------------------------------------------------------ | +| Decorator parameters | None. | +| Synchronization type | Does not synchronize with any type of variable in the parent component. | +| Allowed variable types| Object, class, string, number, Boolean, enum, and array of these types.
Date type.
For details about the scenarios of supported types, see [Observed Changes](#observed-changes).
The type must be specified.
**any** is not supported. A combination of simple and complex types is not supported. The **undefined** and **null** values are not allowed.
**NOTE**
The Length, ResourceStr, and ResourceColor types are a combination of simple and complex types and therefore not supported.| +| Initial value for the decorated variable| Local initialization is required. | ## Variable Transfer/Access Rules -| Transfer/Access | Description | -| --------- | ---------------------------------------- | -| Initialization from the parent component | Optional. Initialization from the parent component or local initialization can be used.
An \@State decorated variable can be initialized from a regular variable or an \@State, \@Link, \@Prop, \@Provide, \@Consume, \@ObjectLink, \@StorageLink, \@StorageProp, \@LocalStorageLink, or \@LocalStorageProp decorated variable in its parent component.| -| Subnode initialization | Supported. An \@State decorated variable can be used to initialize a regular variable or \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.| -| Access| Private, accessible only within the component. | +| Transfer/Access | Description | +| ------------------ | ------------------------------------------------------------ | +| Initialization from the parent component | Optional. Initialization from the parent component or local initialization can be used. The initial value specified in the parent component will overwrite the one defined locally.
An \@State decorated variable can be initialized from a regular variable or an \@State, \@Link, \@Prop, \@Provide, \@Consume, \@ObjectLink, \@StorageLink, \@StorageProp, \@LocalStorageLink, or \@LocalStorageProp decorated variable in its parent component.| +| Subnode initialization | Supported. An \@State decorated variable can be used to initialize a regular variable or \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.| +| Access| Private, accessible only within the component. | **Figure 1** Initialization rule @@ -153,6 +153,45 @@ Not all changes to state variables cause UI updates. Only changes that can be ob this.title.push(new Model(12)) ``` +- When the decorated variable is of the Date type, the overall value assignment of the Date object can be observed, and the following APIs can be called to update Date attributes: **setFullYear**, **setMonth**, **setDate**, **setHours**, **setMinutes**, **setSeconds**, **setMilliseconds**, **setTime**, **setUTCFullYear**, **setUTCMonth**, **setUTCDate**, **setUTCHours**, **setUTCMinutes**, **setUTCSeconds**, and **setUTCMilliseconds**. + + ```ts + @Entry + @Component + struct DatePickerExample { + @State selectedDate: Date = new Date('2021-08-08') + + build() { + Column() { + Button('set selectedDate to 2023-07-08') + .margin(10) + .onClick(() => { + this.selectedDate = new Date('2023-07-08') + }) + Button('increase the year by 1') + .margin(10) + .onClick(() => { + this.selectedDate.setFullYear(this.selectedDate.getFullYear() + 1) + }) + Button('increase the month by 1') + .margin(10) + .onClick(() => { + this.selectedDate.setMonth(this.selectedDate.getMonth() + 1) + }) + Button('increase the day by 1') + .margin(10) + .onClick(() => { + this.selectedDate.setDate(this.selectedDate.getDate() + 1) + }) + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: this.selectedDate + }) + }.width('100%') + } + } + ``` ### Framework Behavior @@ -168,9 +207,9 @@ Not all changes to state variables cause UI updates. Only changes that can be ob ### Decorating Variables of Simple Types -In this example, \@State is used to decorate the **count** variable of the simple type and turns it into a state variable. The change of **count** causes the update of the **\