状态

@state

1
2
3
4
5
6
1组件内部状态，跟页面绑定
2变量发生变化，页面UI重新渲染
3变量要求初始化，不能为空
4支持object、class、string、number、boolean等
5嵌套对象属性变化，页面无法检测更新
6默认私有变量，只能在组件中访问

1
2
3
4
5
6
7
8
9
1export class UserModel {
2  id: number
3  name: string
4
5  constructor(id: number, name: string) {
6    this.id = id
7    this.name = name
8  }
9}

1
2
3
1@State user: UserModel = new UserModel(1, 'Yang')
2@State users: UserModel[] = [new UserModel(2, 'Jim'), new UserModel(3, 'Helen')]
3@State users2: Array<UserModel> = [new UserModel(2, 'Jim'), new UserModel(3, 'Helen')]

加载数据

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 1class CreateTaskModel {
 2  private tasks: TaskModel[] = []
 3
 4  initData() {
 5    for (let index = 0; index < 20; index++) {
 6      const task = new TaskModel(
 7        `${index + 1}`,
 8        `任务标题${index + 1}`,
 9        `任务详情${index + 1}`,
10        '2025-02-03',
11        '09:00',
12        '12:00',
13        1,
14        1
15      )
16      this.tasks.push(task)
17    }
18    return this.tasks
19  }
20}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 1import CreateTaskModel, { TaskModel } from '../viewmodel/TaskModel'
 2
 3@Entry
 4@Component
 5struct Page02_TaskList {
 6  // 组件加载完毕后加载数据
 7  aboutToAppear(): void {
 8    // 发送请求获取服务器数据
 9    const array = CreateTaskModel.initData()
10    console.log(JSON.stringify(array))
11  }
12
13  build() {
14    Column() {
15    }
16    .height('100%')
17    .width('100%')
18    .padding(10)
19    .backgroundColor('#f1f3f5')
20  }
21}

1
102-03 12:00:12.690   9504-10412    A0c0d0/JSAPP                                          I     [{"id":"1","taskTitle":"任务标题1","taskDetail":"任务详情1","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"2","taskTitle":"任务标题2","taskDetail":"任务详情2","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"3","taskTitle":"任务标题3","taskDetail":"任务详情3","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"4","taskTitle":"任务标题4","taskDetail":"任务详情4","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"5","taskTitle":"任务标题5","taskDetail":"任务详情5","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"6","taskTitle":"任务标题6","taskDetail":"任务详情6","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"7","taskTitle":"任务标题7","taskDetail":"任务详情7","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"8","taskTitle":"任务标题8","taskDetail":"任务详情8","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"9","taskTitle":"任务标题9","taskDetail":"任务详情9","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"10","taskTitle":"任务标题10","taskDetail":"任务详情10","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"11","taskTitle":"任务标题11","taskDetail":"任务详情11","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"12","taskTitle":"任务标题12","taskDetail":"任务详情12","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"13","taskTitle":"任务标题13","taskDetail":"任务详情13","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"14","taskTitle":"任务标题14","taskDetail":"任务详情14","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"15","taskTitle":"任务标题15","taskDetail":"任务详情15","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"16","taskTitle":"任务标题16","taskDetail":"任务详情16","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"17","taskTitle":"任务标题17","taskDetail":"任务详情17","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"18","taskTitle":"任务标题18","taskDetail":"任务详情18","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"19","taskTitle":"任务标题19","taskDetail":"任务详情19","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"},{"id":"20","taskTitle":"任务标题20","taskDetail":"任务详情20","taskDate":"2025-02-03","taskBeginTime":"09:00","taskEndTime":"12:00","taskType":1,"taskTag":1,"taskStatus":"future"}]

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12