鸿蒙状态管理：用樱花般的优雅，构建灵动应用 原创

@Entry@Component  
struct CounterComponent {  
  @State count: number = 0; // 像樱花初绽，初始值为0  

  build() {  
    Column() {  
      Text(`Count: ${this.count}`).fontSize(24);  
      Button('+1').onClick(() => {  
        this.count++; // 点击后，樱花飘落般自然更新  
      });  
    }  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

// 父组件  
@Entry@Component  
struct ParentComponent {  
  @State message: string = "Hello from Parent!"; // 父的郁金香  

  build() {  
    Column() {  
      ChildComponent({ childMsg: this.message }); // 将花茎递给子组件  
    }  
  }  
}  

// 子组件  
@Component  
struct ChildComponent {  
  @Prop childMsg: string; // 子接过郁金香  

  build() {  
    Text(this.childMsg); // 静静展示  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

// 父组件  
@Entry@Component  
struct ParentComponent {  
  @State score: number = 90; // 父的根系  

  build() {  
    Column() {  
      ChildComponent({ linkScore: this.score }); // 传递根系  
    }  
  }  
}  

// 子组件  
@Component  
struct ChildComponent {  
  @Link linkScore: number; // 子连接根系  

  build() {  
    Button('扣分').onClick(() => {  
      this.linkScore -= 10; // 点击后，两朵花同时凋零10分  
    });  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

// 父组件  
@Entry@Component  
struct ParentComponent {  
  @Provide theme: string = "light"; // 种下主题  

  build() {  
    Column() {  
      ChildComponent();  
    }  
  }  
}  

// 子组件  
@Component  
struct ChildComponent {  
  @Consume theme: string; // 直接采摘  

  build() {  
    Text(`当前主题：${this.theme}`);  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

// 创建花房  
let storage = new LocalStorage({ "username": "小樱" });  

// 组件A  
@Component  
struct ComponentA {  
  @LocalStorageProp('username') name: string = ""; // 只读花香  

  build() {  
    Text(`欢迎，${this.name}`);  
  }  
}  

// 组件B  
@Component  
struct ComponentB {  
  @LocalStorageLink('username') name: string = ""; // 可修改花香  

  build() {  
    Button('改名').onClick(() => {  
      this.name = "小葵"; // 修改后，整个花房同步  
    });  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

PersistentStorage.persistProp('userScore', 100); // 刻入年轮  

@Entry@Component  
struct GameComponent {  
  @StorageLink('userScore') score: number; // 读取年轮  

  build() {  
    Text(`得分：${this.score}`);  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Environment.envProp('language', 'zh'); // 读取系统语言  

@Entry@Component  
struct SettingsPage {  
  @StorageProp('language') lang: string;  

  build() {  
    Text(this.lang === 'zh' ? '你好' : 'Hello'); // 智能问候  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

@Observed  
class User {  
  name: string;  
  age: number;  
  // 每片花瓣都被观察  
}  
1.
2.
3.
4.
5.
6.

@Component  
struct ChildComponent {  
  @ObjectLink user: User;  

  build() {  
    Button('长大一岁').onClick(() => {  
      this.user.age++; // 修改后，父组件同步更新  
    });  
  }  
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.