解决页面间数据不同步问题

在页面间页面跳转实现类属性的数据同步。

出现的问题

在页面间使用@Observed装饰器和@ObjectLink装饰器来实现数据同步,在Index页面User类属性增加,跳转到page2页面,数据相同。

但是从page2继续增加User类属性值页面router.back()后,Index页面中并未观察到User类属性的增加。


HarmonyOS
2024-05-26 17:19:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Dinkar

在页面间想要实现数据的同步需要使用应用全局的UI状态存储即AppStorage。

功能描述

AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。

和AppStorage不同的是,LocalStorage是页面级的,通常应用于页面内的数据共享。而AppStorage是应用级的全局状态共享,还相当于整个应用的“中枢”,持久化数据PersistentStorage和环境变量Environment都是通过AppStorage中转,才可以和UI交互。

使用的核心API

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

  •  AppStorage是在应用启动的时候会被创建的单例。它的目的是为了提供应用状态数据的中心存储,这些状态数据在应用级别都是可访问的。AppStorage将在应用运行过程保留其属性。属性通过唯一的键字符串值访问。
  •  AppStorage可以和UI组件同步,且可以在应用业务逻辑中被访问。
  • AppStorage支持应用的主线程内多个UIAbility实例间的状态共享。
  •  AppStorage中的属性可以被双向同步,数据可以是存在于本地或远程设备上,并具有不同的功能,比如数据持久化(详见PersistentStorage)。这些数据是通过业务逻辑中实现,与UI解耦,如果希望这些数据在UI中使用,需要用到@StorageProp和@StorageLink。

核心代码解释

Index页面代码

import {User} from "../utils/model" 
import router from '@ohos.router'; 
import { User1 } from '../utils/model1'; 
  
@Entry 
@Component 
struct Page2 { 
  @State u: User = User.instance(); 
  build() { 
    Column({space:10}) { 
      ViewA({u: this.u}) 
      ViewB() 
  
      Button("back Index").onClick(()=>{ 
        router.back() 
      }) 
    } 
  } 
} 
  
@Component 
struct ViewA { 
  @ObjectLink  u: User; 
  
  build() { 
    Row() { 
      Text(this.u.name).fontSize(30) 
      Button("+").onClick(() => { 
        this.u.name = new Date().getTime().toString() 
      }) 
    } 
  } 
} 
@Component 
struct ViewB { 
  @StorageLink('u1') u1:User1=User1.instance(); 
  
  
  build() { 
    Row() { 
      Text(this.u1.name).fontSize(30) 
      Button("+").onClick(() => { 
        this.u1.name = new Date().getTime().toString() 
      }) 
    } 
  } 
}

子组件ViewA通过@ObjectLink装饰器装饰,子组件ViewB使用 @ObjectLink装饰

import {User} from "../utils/model" 
import router from '@ohos.router'; 
import { User1 } from '../utils/model1'; 
  
@Entry 
@Component 
struct Page2 { 
  @State u: User = User.instance(); 
  build() { 
    Column({space:10}) { 
      ViewA({u: this.u}) 
      ViewB() 
  
      Button("back Index").onClick(()=>{ 
        router.back() 
      }) 
    } 
  } 
} 
  
@Component 
struct ViewA { 
  @ObjectLink  u: User; 
  
  build() { 
    Row() { 
      Text(this.u.name).fontSize(30) 
      Button("+").onClick(() => { 
        this.u.name = new Date().getTime().toString() 
      }) 
    } 
  } 
} 
@Component 
struct ViewB { 
  @StorageLink('u1') u1:User1=User1.instance(); 
  
  
  build() { 
    Row() { 
      Text(this.u1.name).fontSize(30) 
      Button("+").onClick(() => { 
        this.u1.name = new Date().getTime().toString() 
      }) 
    } 
  } 
}

子组件ViewA通过@ObjectLink装饰器装饰,子组件ViewB使用 @ObjectLink装饰

通过以上代码中ViewA和ViewB实现效果可以发现,ViewA不能实现数据同步,但是ViewB子组件可以实现数据的同步。

实现效果

  •  Index User类属性增加值:

  • 跳转到Page2页面,数据相同

  • Page2页面User类数据增加:

  • Page2页面router.back()后返回Index

通过以上步骤可以发现页面间数据同步不可以使用@Observed装饰器和@ObjectLink装饰器,而是使用AppStorage来实现。

分享
微博
QQ
微信
回复
2024-05-27 22:00:26
相关问题
mysql 不同数据同步
1346浏览 • 1回复 待解决
mysqldump搭建从库同步数据问题
2064浏览 • 0回复 待解决
HarmonyOS如何解决数据存储问题
7797浏览 • 3回复 已解决
多个数据库,同步数据
1031浏览 • 1回复 待解决
MySQL的数据查询慢的问题怎么解决
796浏览 • 1回复 待解决
数据库操作同步的方法
720浏览 • 1回复 待解决
设备同步及云侧相关问题
8129浏览 • 3回复 待解决
键值型数据库跨设备数据同步demo
419浏览 • 1回复 待解决
Postgresql 宿主机如何与Docker同步数据?
2725浏览 • 1回复 待解决
鸿蒙手表和Android手机app同步数据
10346浏览 • 1回复 待解决
mysql主从同步问题有知道的吗?
1699浏览 • 1回复 待解决