十、应用级变量的状态变量原创

亚鲁鲁666

发布于 2024-12-10 21:42

3175浏览

1收藏

UIAbility内状态-LocalStorage

LocalStorage是页面级的UI状态存储，是针对UIAbility的状态共享，一个UIAbility有多个页面，这些页面通过@Entry 装饰器接收到对应参数, 都可以通过 LocalStorage 共享数据。

LocalStorage 也可以在同一个UIAbility 内，页面间共享状态。

十、应用级变量的状态变量-鸿蒙开发者社区

装饰器@LocalStorageProp

:::success 用法

创建LocalStorage 实例：

const storage = new LocalStorage({ key: value })
设置给@Entry的参数：@Entry(storage)

单向 **@LocalStorageProp('user')** 类似于@Prop，

:::

装饰器@LocalstorageLink

:::success 用法

创建LocalStorage 实例：

const storage = new LocalStorage({ key: value })
设置给@Entry的参数：@Entry(storage)

双向 **@LocalStorageLink('user')** 类似于@Link，全局均可变

:::

在页面内使用示例

import { router } from '@kit.ArkUI'

export class UserInfo {
  name: string = ''
  age: number = 0
}

let userData: Record<string, UserInfo> = {
  'user': {
    name: 'jack',
    age: 18
  }
}
//1.创建 LocalStorage 实例
export const storage = new LocalStorage(userData)
//2.设置给@Entry参数
@Entry(storage)
@Component
struct Index {
  //3.单向
  @LocalStorageProp('user')
  user: UserInfo = {
    name: 'rose',
    age: 18
  }

  build() {
    Column({ space: 15 }) {
      Text('我是首页：')
        .fontSize(40)
      Text('name:' + this.user.name)
        .fontSize(40)
      Text('age:' + this.user.age)
        .fontSize(40)
      Button('去页面 2')
        .onClick(() => {
          router.pushUrl({ url: 'pages/day11/knowledges/LocalStorage01/LocalStorage02' })
        })

      Divider()
      ChildA()
      Divider()
      ChildB()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  //3.双向
  @LocalStorageLink('user')
  user: UserInfo = {
    name: '',
    age: 0
  }

  build() {
    Column() {
      Text('我是子组件A')
        .fontSize(30)
      Text(this.user.name)
        .onClick(() => {
          this.user.name += '!'
        })
    }
    .backgroundColor(Color.Orange)
    .width('100%')

  }
}

@Component
struct ChildB {
  @LocalStorageLink('user')
  user: UserInfo = {
    name: '',
    age: 0
  }

  build() {
    Column() {
      Text('我是子组件B')
        .fontSize(30)
      Text(this.user.age.toString())
        .onClick(() => {
          this.user.age++
        })
    }
    .backgroundColor(Color.Blue)
    .width('100%')

  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.

:::success 如果要在其他页面使用，通过如下步骤实现：

页面 A 中导出 LocalStorage
其他需要使用的页面导入并使用 LocalStorage 即可

:::

import { storage, UserInfo } from './LocalStorage01';

@Entry(storage)
@Component
struct LocalStorage02 {
  @LocalStorageLink('user')
  user: UserInfo = {
    name: 'rose',
    age: 18
  }

  build() {
    Row() {
      Column() {
        Text('我是页面 2：')
          .fontSize(40)
        Text(JSON.stringify(this.user))
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.user.name = '罗伯特'
            this.user.age = 99
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

在页面间使用示例

如果想在UIAbility中共享某个localStorage，可以使用如下方式实现：

可以在loadContent过程中直接传入创建的LocalStorage
页面中通过 const storage = LocalStorage.GetShared() 得到实例
通过 @Entry(storage) 传入页面，后续的使用和之前没有区别

// 传入 LocalStorage 进行初始化
export class FoodInfo {
  name: string = ''
  color: string = ''
}

let foodData: Record<string, FoodInfo> = {
    'food': {
      name: '西兰花',
      color: '黄绿色'
    }
  }

const foodStorage = new LocalStorage(foodData)


windowStage.loadContent('页面', foodStorage, (err, data) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

AppStorage:应用全局的UI状态存储

一个应用可能有若干个UIAbility，如果要在多个 UIAbility 共享数据，就可以使用 AppStorage

十、应用级变量的状态变量-鸿蒙开发者社区

装饰器@StorageProp

:::success 用法:

初始化： AppStorage.SetOrCreate(key,value)
单向 @StorageProp('user') 组件内可变

:::

装饰器@StorageLink

:::success 用法:

初始化： AppStorage.SetOrCreate(key,value)
双向 @StorageLink('user') 全局均可变

:::

页面内使用示例

class User {
  name: string = ''
  age: number = 0
}

AppStorage.setOrCreate<User>('user', { name: 'jack', age: 18 })

@Entry
@Component
struct AppStorageUse01 {
  @StorageLink('user')
  user: User = {
    name: '',
    age: 0
  }

  build() {
    Column({ space: 15 }) {
      Text('我是父组件：')
        .fontSize(30)
      Text('name:' + this.user.name)
        .fontSize(30)
        .onClick(() => {
          this.user.name += '!'
        })
      Text('age:' + this.user.age)
        .fontSize(30)
        .onClick(() => {
          this.user.age++
        })


      Divider()
      ChildA()
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct ChildA {
  @StorageProp('user')
  user: User = {
    name: '',
    age: 0
  }

  build() {
    Column({ space: 15 }) {
      Text('子组件 A：')
        .fontColor(Color.White)
      Text('name:' + this.user.name)
        .fontColor(Color.White)
        .onClick(() => {
          this.user.name += '!'
        })

      Text('age:' + this.user.age)
        .fontColor(Color.White)
        .onClick(() => {
          this.user.age++
        })
    }
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Orange)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.

页面间使用示例

// 初始化 基本数据（）
AppStorage.setOrCreate('message', '感觉自己萌萌哒')1.
2.

@Entry
@Component
struct AppStorageUse03 {
  @StorageProp('message')
  message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text('基本数据类型')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.message)
          .fontSize(20)
        Button('测试 Api')
          .onClick(() => {
            // 根据 key 获取对应的数据链接，后续通过 get 取值，set 赋值
            const messageLink: SubscribedAbstractProperty<string> = AppStorage.link('message')
            // 获取数据并打印
            AlertDialog.show({
              message: messageLink.get()
            })

            // 修改数据
            messageLink.set('萌你奶奶个腿~')
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

核心API：

// 以下写法 每次都需要通过 key 来指定对应的数据
// 获取数据
// AppStorage.get<ValueType>(key)

// 覆盖数据
// AppStorage.set<ValueType>(key,value)

// 获取数据的 link 后续通过 link 进行取值和修改
// const link: SubscribedAbstractProperty<ValueType> = AppStorage.link(key)
// 取值
// link.get()
// 覆盖
// link.set(value)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

PersistentStorage

Environment

分类

标签

已于2024-12-12 23:08:40修改

51CTO

51CTO博客

51CTO学堂

十、应用级变量的状态变量原创

UIAbility内状态-LocalStorage

装饰器@LocalStorageProp

装饰器@LocalstorageLink

在页面内使用示例

在页面间使用示例

AppStorage:应用全局的UI状态存储

装饰器@StorageProp

装饰器@StorageLink

页面内使用示例

页面间使用示例

PersistentStorage

Environment

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

十、应用级变量的状态变量 原创

UIAbility内状态-LocalStorage

装饰器@LocalStorageProp

装饰器@LocalstorageLink

在页面内使用示例

在页面间使用示例

AppStorage:应用全局的UI状态存储

装饰器@StorageProp

装饰器@StorageLink

页面内使用示例

页面间使用示例

PersistentStorage

Environment

目录

订阅鸿蒙技术特刊，精选内容抢先看

十、应用级变量的状态变量原创