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

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

出现的问题

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

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

HarmonyOS

鸡翅可乐

2024-05-26 17:19:52

浏览

回答 1

待解决

回答 1

按赞同

按时间

克里斯蒂东

在页面间想要实现数据的同步需要使用应用全局的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子组件可以实现数据的同步。

实现效果