HarmonyOS @LocalStorageLink装饰器装饰的变量无法在组件初始化的时候无法传入，并且当@LocalStorageLink装饰器装饰的数组变量发生变更的时候，ForEach条件渲染无法正常刷新UI？

Question

import { Advertisement } from ‘…/common/bean/AdvertisementData’
import { Floor } from ‘…/common/bean/Floor’
import { MiddleMenu } from ‘…/common/bean/MiddleMenu’
import { BannerType, Location } from ‘…/common/constants/CommonConstants’
import { getAdvertisement, getMiddleMenuList, getModuleList } from ‘…/network/http/ApiService’
import { getTopBannerHeight } from ‘…/utils/FloorUtils’
import { LogUtils } from ‘…/utils/LogUtils’
import { FloorMainItem } from ‘…/view/FloorMainItem’
import { RefreshLayout } from ‘…/view/refresh/RefreshLayout’
import { RefreshState } from ‘…/view/refresh/RefreshState’
import NativeCommonViewModel from ‘…/viewmodel/NativeCommonViewModel’
let storage = new LocalStorage({‘test’:123})

@Entry(storage)
@Component
export struct NativeCommonPage {
  @LocalStorageLink(‘pageId’) pageId: string = ‘’
  @LocalStorageLink(‘advertisementList’) @Watch(‘onPageIdChange’) advertisementList: Advertisement[] = []
  @State middleMenus: MiddleMenu[] = []
  @State floors: Floor[] = []
  @LocalStorageLink(‘bannerType’) bannerType: number = BannerType.CAROUSEL
  private scroller: Scroller = new Scroller()
  viewModel: NativeCommonViewModel = new NativeCommonViewModel(storage)

  aboutToAppear() {

  }
  onPageIdChange(name:string) {
    LogUtils.debug(onPageIdChange name = ${name}, this.pageId = ${this.pageId}, this.advertisementList = ${this.advertisementList})
  }

  build() {
    Column() {
      RefreshLayout({
        scroller: this.scroller,
        contentLayout: () => this.contentLayout(),
        onRefresh: () => this.onRefresh(),
        onLoadMore: () => this.onLoadMore(),
        onNoMoreData:() => this.onNoMoreData()
      })
    }
  }

  onRefresh(): Promise<RefreshState> {
    return new Promise<RefreshState>((resolve, _reject) => {
      this.viewModel.getAdvertisement()
      getMiddleMenuList(this.pageId).then(result => {
        this.middleMenus = result.data
      })
      getModuleList(this.pageId, 1, 10).then(result => {
        this.floors = result.data.list;
        resolve(RefreshState.REFRESH_FINISH);
      }).catch(() => {
        resolve(RefreshState.REFRESH_FAIL);
      })
    })
  }

  onLoadMore(): Promise<RefreshState> {
    return new Promise<RefreshState>((resolve, _reject) => {
      setTimeout(() => {
        resolve(RefreshState.NO_MORE_DATA);
      }, 1000)
    })
  }

  onNoMoreData() {
    LogUtils.debug(“onNoMoreData”)
  }

  @Builder
  contentLayout(): void {
    Scroll(this.scroller) {
      Column({ space: 12 }) {
        if (this.bannerType === BannerType.CAROUSEL) {
          Swiper() {
            ForEach(this.advertisementList, (item: Advertisement) => {
              Image(item.imgUrl)
                .aspectRatio(16 / 9)
                .clip(new Rect({
                  width: ‘100%’,
                  height: ‘100%’,
                  radius: 12
                }))
                .margin({
                  left: 24,
                  right: 24
                })
            }, (item: Advertisement) => item.id.toString())
          }
          .autoPlay(true)
          .width(‘100%’)
          .margin({
            top: 12
          })
        } else {
          List() {
            ForEach(this.advertisementList, (item: Advertisement, index: number) => {
              ListItem() {
                Image(item.imgUrl)
                  .height(‘100%’)
                .aspectRatio(150 / 184)
                  .clip(new Rect({
                    width: ‘100%’,
                    height: ‘100%’,
                    radius: 8
                  }))
                  .margin({
                    left: index === 0 ? 24 : 12,
                    right: (this.advertisementList.length - 1) === index ? 24 : 0
                  })
              }
            }, (item: Advertisement) => item.id.toString())
          }
          .listDirection(Axis.Horizontal)
          .width(‘100%’)
          .height(getTopBannerHeight())
            .margin({
              top: 12
            })
        }
        if (this.middleMenus && this.middleMenus.length > 0) {
          Row() {
            ForEach(this.middleMenus, (item: MiddleMenu) => {
              Column() {
                Image(item.icon)
                  .width(40)
                  .height(40)
                Text(item.title)
                  .fontSize(10)
                  .fontColor(’#000000’)
                .lineHeight(18)
                  .textAlign(TextAlign.Center)
                  .maxLines(1)
              }
              .layoutWeight(1)
            }, (item: MiddleMenu) => item.id.toString())
          }
          .width(‘100%’)
          .height(62)
        }

        List({ space: 24 }) {
          ForEach(this.floors, (item: Floor) => {
            ListItem() {
              FloorMainItem({ data: item })
            }
          }, (item: Floor) => item.id)
        }
        .margin({
          bottom: 12
        })
        .height('auto')
        .width('100%')
        .edgeEffect(EdgeEffect.None)
      }
      .justifyContent(FlexAlign.Start)
    }
    .scrollBar(BarState.Off)
    .height('100%')
    .edgeEffect(EdgeEffect.None)
  }
}

@Builder
export function getPageByType(data: any) {
  if (getPageType(data) === PageType.PAGE_TAB) {
    TabPage({ bottomData: data })
  } else if (getPageType(data) === PageType.PAGE_NATIVE_COMMON) {
    NativeCommonPage({pageId:data.pageId})
  } else if (getPageType(data) === PageType.PAGE_NATIVE_CUSTOM) {
    getPageById(data.pageId)
  } else if (getPageType(data) === PageType.PAGE_H5) {
    H5Page()
  } else {
    EmptyPage()
  }
}

Answer 1

涉及的到的自定义组件接收LocalStorage实例场景需要API12支持，参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5\#将localstorage实例从uiability共享到一个或多个视图

对于 NativeCommonPage 可以在mainpage的tabs里面，又可以是一个独立的页面呈现的需求，需要手动在@Entry和自定义组件的时候配置localstorage实例