未验证 提交 b4e5c2f5 编写于 作者: 1 189******51 提交者: Gitee

IssueNo: #I7XEJ4:[新需求]: Rectify the arkts syntax of qs on monthly

Description: Rectify the arkts syntax of qs on monthly
Sig: SIG_ApplicaitonFramework
Feature or Bugfix: Feature
Binary Source: No
Signed-off-by: N189******51 <lipeicheng5@huawei.com>
上级 4cd78e0a
...@@ -167,11 +167,12 @@ LocalStorage根据与\@Component装饰的组件的同步类型不同,提供了 ...@@ -167,11 +167,12 @@ LocalStorage根据与\@Component装饰的组件的同步类型不同,提供了
```ts ```ts
let storage = new LocalStorage({ 'PropA': 47 }); // 创建新实例并使用给定对象初始化 let storage = new LocalStorage(); // 创建新实例并使用给定对象初始化
let propA = storage.get('PropA') // propA == 47 storage['PropA'] = 47
let link1 = storage.link('PropA'); // link1.get() == 47 let propA = storage.get<number>('PropA') // propA == 47
let link2 = storage.link('PropA'); // link2.get() == 47 let link1 = storage.link<number>('PropA'); // link1.get() == 47
let prop = storage.prop('PropA'); // prop.get() = 47 let link2 = storage.link<number>('PropA'); // link2.get() == 47
let prop = storage.prop<number>('PropA'); // prop.get() = 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48 link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48 prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
...@@ -191,36 +192,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 ...@@ -191,36 +192,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
- \@LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。 - \@LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。
```ts ```ts
// 创建新实例并使用给定对象初始化 // 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ 'PropA': 47 }); let storage = new LocalStorage();
storage['PropA'] = 47;
@Component
struct Child { @Component
// @LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定 struct Child {
@LocalStorageLink('PropA') storLink2: number = 1; // @LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定
@LocalStorageLink('PropA') storLink2: number = 1;
build() {
Button(`Child from LocalStorage ${this.storLink2}`) build() {
// 更改将同步至LocalStorage中的'ProA'以及Parent.storLink1 Button(`Child from LocalStorage ${this.storLink2}`)
.onClick(() => this.storLink2 += 1) // 更改将同步至LocalStorage中的'ProA'以及Parent.storLink1
} .onClick(() => this.storLink2 += 1)
} }
// 使LocalStorage可从@Component组件访问 }
@Entry(storage) // 使LocalStorage可从@Component组件访问
@Component @Entry(storage)
struct CompA { @Component
// @LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定 struct CompA {
@LocalStorageLink('PropA') storLink1: number = 1; // @LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定
@LocalStorageLink('PropA') storLink1: number = 1;
build() {
Column({ space: 15 }) { build() {
Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already Column({ space: 15 }) {
.onClick(() => this.storLink1 += 1) Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already
// @Component子组件自动获得对CompA LocalStorage实例的访问权限。 .onClick(() => this.storLink1 += 1)
Child() // @Component子组件自动获得对CompA LocalStorage实例的访问权限。
} Child()
} }
} }
}
``` ```
...@@ -233,37 +235,39 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 ...@@ -233,37 +235,39 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
- Child组件中,Text绑定的storProp2 依旧显示47。 - Child组件中,Text绑定的storProp2 依旧显示47。
```ts ```ts
// 创建新实例并使用给定对象初始化 // 创建新实例并使用给定对象初始化
let storage = new LocalStorage({ 'PropA': 47 }); let storage = new LocalStorage();
// 使LocalStorage可从@Component组件访问 storage['PropA'] = 47;
@Entry(storage)
@Component // 使LocalStorage可从@Component组件访问
struct CompA { @Entry(storage)
// @LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定 @Component
@LocalStorageProp('PropA') storProp1: number = 1; struct CompA {
// @LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定
build() { @LocalStorageProp('PropA') storProp1: number = 1;
Column({ space: 15 }) {
// 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中 build() {
Button(`Parent from LocalStorage ${this.storProp1}`) Column({ space: 15 }) {
.onClick(() => this.storProp1 += 1) // 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中
Child() Button(`Parent from LocalStorage ${this.storProp1}`)
} .onClick(() => this.storProp1 += 1)
Child()
} }
} }
}
@Component @Component
struct Child { struct Child {
// @LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定 // @LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定
@LocalStorageProp('PropA') storProp2: number = 2; @LocalStorageProp('PropA') storProp2: number = 2;
build() { build() {
Column({ space: 15 }) { Column({ space: 15 }) {
// 当CompA改变时,当前storProp2不会改变,显示47 // 当CompA改变时,当前storProp2不会改变,显示47
Text(`Parent from LocalStorage ${this.storProp2}`) Text(`Parent from LocalStorage ${this.storProp2}`)
}
} }
} }
}
``` ```
...@@ -274,9 +278,10 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 ...@@ -274,9 +278,10 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
```ts ```ts
// 构造LocalStorage实例 // 构造LocalStorage实例
let storage = new LocalStorage({ 'PropA': 47 }); let storage = new LocalStorage();
storage['PropA'] = 47;
// 调用link9+接口构造'PropA'的双向同步数据,linkToPropA 是全局变量 // 调用link9+接口构造'PropA'的双向同步数据,linkToPropA 是全局变量
let linkToPropA = storage.link('PropA'); let linkToPropA = storage.link<number>('PropA');
@Entry(storage) @Entry(storage)
@Component @Component
...@@ -288,7 +293,7 @@ struct CompA { ...@@ -288,7 +293,7 @@ struct CompA {
build() { build() {
Column() { Column() {
Text(`incr @LocalStorageLink variable`) Text(`incr @LocalStorageLink variable`)
// 点击“incr @LocalStorageLink variable”,this.storLink加1,改变同步回storage,全局变量linkToPropA也会同步改变 // 点击“incr @LocalStorageLink variable”,this.storLink加1,改变同步回storage,全局变量linkToPropA也会同步改变
.onClick(() => this.storLink += 1) .onClick(() => this.storLink += 1)
...@@ -317,63 +322,71 @@ Child自定义组件中的变化: ...@@ -317,63 +322,71 @@ Child自定义组件中的变化:
1. playCountLink的刷新会同步回LocalStorage,并且引起兄弟组件和父组件相应的刷新。 1. playCountLink的刷新会同步回LocalStorage,并且引起兄弟组件和父组件相应的刷新。
```ts ```ts
let storage = new LocalStorage({ countStorage: 1 }); class Data {
countStorage: number = 0;
@Component }
struct Child { let data: Data = { countStorage: 1 }
// 子组件实例的名字 let storage = new LocalStorage(data);
label: string = 'no name';
// 和LocalStorage中“countStorage”的双向绑定数据 @Component
@LocalStorageLink('countStorage') playCountLink: number = 0; struct Child {
// 子组件实例的名字
build() { label: string = 'no name';
Row() { // 和LocalStorage中“countStorage”的双向绑定数据
Text(this.label) @LocalStorageLink('countStorage') playCountLink: number = 0;
.width(50).height(60).fontSize(12)
Text(`playCountLink ${this.playCountLink}: inc by 1`) build() {
.onClick(() => { Row() {
this.playCountLink += 1; Text(this.label)
}) .width(50).height(60).fontSize(12)
.width(200).height(60).fontSize(12) Text(`playCountLink ${this.playCountLink}: inc by 1`)
}.width(300).height(60) .onClick(() => {
} this.playCountLink += 1;
} })
.width(200).height(60).fontSize(12)
@Entry(storage) }.width(300).height(60)
@Component }
struct Parent { }
@LocalStorageLink('countStorage') playCount: number = 0;
@Entry(storage)
build() { @Component
Column() { struct Parent {
Row() { @LocalStorageLink('countStorage') playCount: number = 0;
Text('Parent')
.width(50).height(60).fontSize(12) build() {
Text(`playCount ${this.playCount} dec by 1`) Column() {
.onClick(() => { Row() {
this.playCount -= 1; Text('Parent')
}) .width(50).height(60).fontSize(12)
.width(250).height(60).fontSize(12) Text(`playCount ${this.playCount} dec by 1`)
}.width(300).height(60) .onClick(() => {
this.playCount -= 1;
Row() { })
Text('LocalStorage') .width(250).height(60).fontSize(12)
.width(50).height(60).fontSize(12) }.width(300).height(60)
Text(`countStorage ${this.playCount} incr by 1`)
.onClick(() => { Row() {
storage.set<number>('countStorage', 1 + storage.get<number>('countStorage')); Text('LocalStorage')
}) .width(50).height(60).fontSize(12)
.width(250).height(60).fontSize(12) Text(`countStorage ${this.playCount} incr by 1`)
}.width(300).height(60) .onClick(() => {
let countStorage: number | undefined = storage.get<number>('countStorage');
Child({ label: 'ChildA' }) if (countStorage != undefined){
Child({ label: 'ChildB' }) countStorage += 1;
storage.set<number>('countStorage', countStorage);
Text(`playCount in LocalStorage for debug ${storage.get<number>('countStorage')}`) }
.width(300).height(60).fontSize(12) })
} .width(250).height(60).fontSize(12)
} }.width(300).height(60)
}
Child({ label: 'ChildA' })
Child({ label: 'ChildB' })
Text(`playCount in LocalStorage for debug ${storage.get<number>('countStorage')}`)
.width(300).height(60).fontSize(12)
}
}
}
``` ```
...@@ -388,11 +401,10 @@ import UIAbility from '@ohos.app.ability.UIAbility'; ...@@ -388,11 +401,10 @@ import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window'; import window from '@ohos.window';
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
storage: LocalStorage = new LocalStorage({ storage: LocalStorage = new LocalStorage();
'PropA': 47
});
onWindowStageCreate(windowStage: window.WindowStage) { onWindowStageCreate(windowStage: window.WindowStage) {
this.storage['PropA'] = 47;
windowStage.loadContent('pages/Index', this.storage); windowStage.loadContent('pages/Index', this.storage);
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册