回复
十、应用级变量的状态变量 原创
亚鲁鲁666
发布于 2024-12-10 21:42
浏览
0收藏
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%')
}
}:::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%')
}
}在页面间使用示例
如果想在
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) ?? '');
});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)
}
}页面间使用示例
// 初始化 基本数据（）
AppStorage.setOrCreate('message', '感觉自己萌萌哒')
@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%')
}
}核心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)PersistentStorage
Environment
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
标签
已于2024-12-12 23:08:40修改
赞
收藏
回复
相关推荐
