基于@State和@Link的鸿蒙跨设备购物车组件实现原创

进修的泡芙

发布于 2025-6-15 12:46

浏览

0收藏

基于@State和@Link的鸿蒙跨设备购物车组件实现

引言

在分布式应用场景中，购物车数据的实时同步对提升用户体验至关重要。本文将介绍如何利用鸿蒙的@State和@Link装饰器实现购物车组件，并借助分布式数据管理实现多设备间的购物车同步，参考鸿蒙游戏中的多设备玩家数据同步机制。

技术架构

!https://example.com/harmony-cart-arch.png

系统由三部分组成：
本地购物车UI组件（使用@State和@Link）

购物车业务逻辑

分布式数据同步服务

核心实现
购物车数据模型

// CartItem.ets
export class CartItem {
id: string; // 商品ID
name: string; // 商品名称
price: number; // 单价
count: number; // 数量
image: Resource; // 商品图片

constructor(id: string, name: string, price: number, image: Resource) {
this.id = id;
this.name = name;
this.price = price;
this.count = 1;
this.image = image;
}

购物车组件实现

// ShoppingCartComponent.ets
@Component
struct ShoppingCartComponent {
@Link @Watch(‘onCartChange’) cartItems: CartItem[];
@State totalPrice: number = 0;

// 监听购物车变化
onCartChange() {
this.totalPrice = this.cartItems.reduce((sum, item) => sum + item.price * item.count, 0);
// 增加商品数量

private increaseCount(item: CartItem) {
item.count += 1;
this.cartItems = […this.cartItems]; // 触发@Link更新
// 减少商品数量

private decreaseCount(item: CartItem) {
if (item.count > 1) {
item.count -= 1;
this.cartItems = […this.cartItems];
}

// 移除商品
private removeItem(index: number) {
this.cartItems.splice(index, 1);
this.cartItems = […this.cartItems];
build() {

Column() {
  List({ space: 10 }) {
    ForEach(this.cartItems, (item: CartItem, index: number) => {
      ListItem() {
        Row() {
          Image(item.image)
            .width(80)
            .height(80)
            .margin(10)
          
          Column() {
            Text(item.name)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
            Text(¥${item.price.toFixed(2)})
              .fontColor('#FF5722')

.layoutWeight(1)

          Row() {
            Button('-')
              .onClick(() => this.decreaseCount(item))
            Text(item.count.toString())
              .margin(10)
            Button('+')
              .onClick(() => this.increaseCount(item))

Button($r(‘app.media.delete’))

            .onClick(() => this.removeItem(index))

.padding(10)

        .borderRadius(8)
        .backgroundColor('#FFFFFF')

})

.layoutWeight(1)

  Divider()
  
  Row() {
    Text('总计:')
      .fontSize(18)
    Text(¥${this.totalPrice.toFixed(2)})
      .fontSize(20)
      .fontColor('#FF5722')
      .margin({ left: 10 })

.justifyContent(FlexAlign.End)

  .width('100%')
  .padding(15)

.width(‘100%’)

.height('100%')
.backgroundColor('#F5F5F5')

}

分布式数据同步服务

// DistributedCartService.ets
import distributedData from ‘@ohos.data.distributedData’;

export class DistributedCartService {
private kvManager: distributedData.KVManager;
private kvStore: distributedData.KVStore;
private readonly STORE_ID = ‘distributed_cart_store’;
private readonly CART_KEY = ‘user_cart_items’;

// 初始化分布式数据库
async initKvStore(context: Context) {
const config = {
bundleName: context.applicationInfo.name,
userInfo: {
userId: ‘currentUser’, // 实际应用中应使用真实用户ID
userType: distributedData.UserType.SAME_USER_ID
};

this.kvManager = distributedData.createKVManager(config);
const options = {
  createIfMissing: true,
  encrypt: false,
  backup: false,
  autoSync: true,
  kvStoreType: distributedData.KVStoreType.SINGLE_VERSION
};

this.kvStore = await this.kvManager.getKVStore(this.STORE_ID, options);

// 同步购物车数据到其他设备

async syncCartData(cartItems: CartItem[]) {
try {
const value = JSON.stringify(cartItems);
await this.kvStore.put(this.CART_KEY, value);
await this.kvStore.sync({
deviceIds: [], // 空数组表示同步给所有设备
mode: distributedData.SyncMode.PUSH_PULL
});
catch (err) {

  console.error('Failed to sync cart data:', err);

}

// 监听购物车数据变化
registerCartObserver(callback: (items: CartItem[]) => void) {
this.kvStore.on(‘dataChange’, distributedData.SubscribeType.SUBSCRIBE_TYPE_ALL, (data) => {
if (data.changeType = distributedData.ChangeType.UPDATE && data.key = this.CART_KEY) {
const items = JSON.parse(data.value.value as string) as CartItem[];
callback(items);
});

// 获取当前购物车数据

async getCartData(): Promise<CartItem[]> {
try {
const value = await this.kvStore.get(this.CART_KEY);
return value ? JSON.parse(value as string) : [];
catch (err) {

  console.error('Failed to get cart data:', err);
  return [];

}

购物车页面整合

// ShoppingCartPage.ets
@Entry
@Component
struct ShoppingCartPage {
@State cartItems: CartItem[] = [];
private cartService: DistributedCartService = new DistributedCartService();

aboutToAppear() {
// 初始化分布式数据服务
this.cartService.initKvStore(getContext(this))
.then(() => {
// 加载本地购物车数据
return this.cartService.getCartData();
})
.then(items => {
this.cartItems = items;

    // 注册数据变化监听
    this.cartService.registerCartObserver((newItems) => {
      this.cartItems = newItems;
    });
  });

build() {

Column() {
  // 购物车组件
  ShoppingCartComponent({ cartItems: $cartItems })
  
  // 操作按钮
  Row() {
    Button('清空购物车')
      .onClick(() => {
        this.cartItems = [];
        this.cartService.syncCartData(this.cartItems);
      })
      .backgroundColor('#FF5722')
      .margin(10)
    
    Button('结算')
      .onClick(() => this.checkout())
      .backgroundColor('#4CAF50')
      .margin(10)

.justifyContent(FlexAlign.Center)

  .width('100%')
  .margin({ top: 20 })

}

// 结算逻辑
private checkout() {
// 实际项目中这里会有支付等逻辑
console.log(‘结算商品:’, this.cartItems);
promptAction.showToast({ message: ‘结算成功!’ });

// 清空购物车并同步
this.cartItems = [];
this.cartService.syncCartData(this.cartItems);

}

关键技术解析
@State和@Link的协同工作

// 父组件定义@State
@State cartItems: CartItem[] = [];

// 子组件通过$语法创建@Link
ShoppingCartComponent({ cartItems: $cartItems })

// 子组件内部
@Link cartItems: CartItem[];

工作机制：
父组件的@State变量cartItems是数据源

子组件通过@Link建立双向绑定

子组件修改cartItems会触发父组件重新渲染

父组件更新cartItems会同步到所有子组件

分布式数据同步流程

sequenceDiagram
participant DeviceA
participant KVStore
participant DeviceB

DeviceA->>KVStore: put(cartItems)
KVStore->>DeviceB: dataChange事件
DeviceB->>DeviceB: 更新本地UI

性能优化策略

差异化同步：

// 只同步变化的商品项
async syncChangedItem(updatedItem: CartItem) {
const index = this.cartItems.findIndex(item => item.id === updatedItem.id);
if (index >= 0) {
this.cartItems[index] = updatedItem;
await this.cartService.syncCartData([updatedItem]); // 只同步单个商品
}

批量操作处理：

// 批量添加商品
async addMultipleItems(newItems: CartItem[]) {
this.cartItems = […this.cartItems, …newItems];
await this.cartService.syncCartData(this.cartItems);

// 防抖处理，避免频繁同步
clearTimeout(this.syncTimer);
this.syncTimer = setTimeout(() => {
this.cartService.syncCartData(this.cartItems);
}, 500);

完整示例场景

商品列表页集成

// ProductListPage.ets
@Entry
@Component
struct ProductListPage {
@State products: Product[] = [
new Product(‘1’, ‘华为Mate 50’, 4999, $r(‘app.media.product1’)),
new Product(‘2’, ‘iPad Pro’, 6799, $r(‘app.media.product2’)),
// 更多商品…
];

@State cartVisible: boolean = false;
private cartService: DistributedCartService = new DistributedCartService();

build() {
Stack() {
// 商品列表
List({ space: 10 }) {
ForEach(this.products, (product: Product) => {
ListItem() {
ProductItem({
product: product,
onAddToCart: () => this.addToCart(product)
})
})

// 购物车侧边栏

  if (this.cartVisible) {
    Column() {
      ShoppingCartComponent({ 
        cartItems: $this.cartService.cartItems 
      })

.width(‘80%’)

    .height('100%')
    .backgroundColor('#FFFFFF')
    .position({ x: '20%', y: 0 })
    .transition({ type: TransitionType.All, opacity: 1 })

}

private async addToCart(product: Product) {

const cartItem = new CartItem(product.id, product.name, product.price, product.image);
await this.cartService.syncChangedItem(cartItem);
promptAction.showToast({ message: '已添加到购物车' });

}

@Component
struct ProductItem {
private product: Product;
private onAddToCart: () => void;

build() {
Row() {
Image(this.product.image)
.width(100)
.height(100)

  Column() {
    Text(this.product.name)
      .fontSize(18)
    Text(¥${this.product.price.toFixed(2)})
      .fontColor('#FF5722')

.layoutWeight(1)

  Button('加入购物车')
    .onClick(this.onAddToCart)

.padding(15)

}

测试与验证
单元测试用例

// ShoppingCartComponent.test.ets
describe(‘ShoppingCartComponent’, () => {
it(‘should calculate total price correctly’, () => {
const cartItems = [
new CartItem(‘1’, ‘Product 1’, 100, $r(‘app.media.product1’)),
new CartItem(‘2’, ‘Product 2’, 200, $r(‘app.media.product2’))
];

const controller = new ShoppingCartComponent();
controller.cartItems = cartItems;

expect(controller.totalPrice).toBe(300);

// 测试数量变化
cartItems[0].count = 2;
controller.cartItems = [...cartItems];
expect(controller.totalPrice).toBe(400);

});
});

// DistributedCartService.test.ets
describe(‘DistributedCartService’, () => {
let service: DistributedCartService;

before(async () => {
service = new DistributedCartService();
await service.initKvStore(getTestContext());
});

it(‘should sync cart data between devices’, async () => {
const testItems = [
new CartItem(‘test1’, ‘Test Product’, 999, $r(‘app.media.test’))
];

// 模拟设备A同步数据
await service.syncCartData(testItems);

// 模拟设备B接收数据
const received = await service.getCartData();
expect(received.length).toBe(1);
expect(received[0].name).toBe('Test Product');

});
});

跨设备同步验证步骤

在设备A上添加商品到购物车

观察设备B上购物车自动更新

在设备B上修改商品数量

确认设备A同步更新

测试网络断开后的数据恢复能力

结论与展望

本文实现的购物车组件具有以下优势：
实时双向同步：基于@State和@Link实现UI与数据的自动同步

跨设备一致性：借助分布式数据管理实现多设备购物车同步

高性能渲染：优化列表渲染性能，支持大规模商品展示

类型安全：使用TypeScript确保数据模型的一致性