HarmonyOS 鸿蒙Next中PersistenceV2使用求助

HarmonyOS 鸿蒙Next中PersistenceV2使用求助

引言

使用通用市场里的通用设置模板时，想将模板中的设置数据由AppStorageV2改造为PersistenceV2进行持久化存储，但是失败了。

预期

将夜间模式,个性化推荐以及字体大小 三个设置项实现持久化

问题

字体大小设置已经实现持久化，但夜间模式和个性化推荐设置项未成功实现持久化， PersistenceV2异常回调日志内容为：

error key: SettingViewModel, reason: serialization, message: TypeError: Cannot set property when setter is undefined。

项目源码地址: https://gitcode.com/imashimaro/UserPerfenceSettingDemoV2

问了AI，试了各种方法还是不行，实在没招了，有大佬帮看下吗，感激不尽

-------------------分隔线------------------------------------

2026-06-05 18:34:58 再次编辑

首先非常感谢评论区各位大佬的热心回复，给了我很多启发。

今天突然开智了，之前陷入一个误区，一直在想法设法持久化通用模板组件里的SettingViewModel，反复在钻牛角尖😭，现在再看，思路确实跑偏了。

我整理了一下新的想法，分享出来供大家参考/指正：

以官方示例AppSettingSample1举例:

import {
  AboutModel,
  SettingItem,
  SettingGroup,
  SettingType,
  SettingView,
  SupportedSetting,
  WebModel,
  IFontModel
} from 'app_setting'

import { PersistenceV2 } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

// 持久化异常回调
PersistenceV2.notifyOnError((key: string, reason: string, msg: string) => {
  hilog.error(0x0000, 'testTag', '%{public}s', `error key: ${key}, reason: ${reason}, message: ${msg}`);
});

// 封装要持久化的设置模型
@ObservedV2
 class AppSettingModel{
  @Trace fontSizeRatio: number = 2 // 自定义字体大小
  @Trace followSystem: boolean = false //是否跟随系统字体大小
  @Trace sysFontSizeScale: number = 1; // 系统字体大小
  @Trace themeModel: number = 1 // 主题模式 0随系统 1浅色 2暗黑
  @Trace personalRecommend: boolean = false //个性化推荐开关
}

@Entry
@ComponentV2
struct AppSettingSample1 {
  @Local navPathStack: NavPathStack = new NavPathStack();
  // 持久化设置模型
  @Local appSetting:AppSettingModel = PersistenceV2.globalConnect({
    type: AppSettingModel,
    defaultCreator: () => new AppSettingModel()
  })!

  @Local group1: SettingGroup = new SettingGroup()
    .setList([
      new SettingItem()
        .setType(SettingType.ROUTER)
        .setLabel('个人信息')
        .setRouterParam({ routerName: 'PersonalSample1' }),
    ])
  @Local group2: SettingGroup = new SettingGroup()
    .setList([
      new SettingItem()
        .setSupportedType(SupportedSetting.LIGHT_DARK_MODE)
        .setSelectIndex(this.appSetting.themeModel) //绑定设置模型的值
        .setOnChange((index) => {
          // 回调修改设置模型的值
          this.appSetting.themeModel = index as number
        })
      ,
      new SettingItem()
        .setSupportedType(SupportedSetting.FONT_SIZE)
        .setExtraParams({
          //绑定设置模型的值
          followSystem: this.appSetting.followSystem,
          fontSizeRatio: this.appSetting.fontSizeRatio,
          onChange: (followSystem: boolean, fontSizeRatio: number, sysFontSizeScale: number) => {
            // 回调修改设置模型的值
            this.appSetting.followSystem = followSystem
            this.appSetting.fontSizeRatio = fontSizeRatio
            this.appSetting.sysFontSizeScale = sysFontSizeScale
          }
        } as IFontModel)
    ])
  @Local group3: SettingGroup = new SettingGroup()
    .setList([
      new SettingItem()
        .setSupportedType(SupportedSetting.PUSH_SWITCH)
        .setOnChange((isOn) => {
          // 获取推送开关情况：isOn as boolean
        }),
      new SettingItem()
        .setSupportedType(SupportedSetting.CLEAR_CACHE)
        .setClickEvent(() => {
            PersistenceV2.remove(AppSettingModel)
        })
    ])
  @Local recommendItem: SettingItem = new SettingItem()
    .setType(SettingType.SWITCH)
    .setLabel('个性化推荐')
    .setSwitchValue(this.appSetting.personalRecommend)//绑定设置模型的值
    .setOnChange((isOn) => {
      // 回调修改设置模型的值
      this.appSetting.personalRecommend = isOn as boolean;
    })
  @Local group4: SettingGroup = new SettingGroup()
    .setTitle('数据和隐私')
    .setList([
      this.recommendItem,
    ])
  @Local group5: SettingGroup = new SettingGroup()
    .setTitle('了解我们如何使用您的数据')
    .setList([
      new SettingItem()
        .setSupportedType(SupportedSetting.WEB)
        .setLabel('业务与隐私的声明')
        .setExtraParams({ src: 'https://www.example.com' } as WebModel),
      new SettingItem()
        .setSupportedType(SupportedSetting.WEB)
        .setLabel('第三方共享信息清单')
        .setExtraParams({ src: 'https://www.example.com' } as WebModel),
      new SettingItem()
        .setSupportedType(SupportedSetting.WEB)
        .setLabel('第三方 SDK 列表')
        .setExtraParams({ src: 'https://www.example.com' } as WebModel),
      new SettingItem()
        .setSupportedType(SupportedSetting.WEB)
        .setLabel('已收集个人信息清单')
        .setExtraParams({ src: 'https://www.example.com' } as WebModel),
      new SettingItem()
        .setSupportedType(SupportedSetting.WEB)
        .setLabel('隐私声明摘要')
        .setExtraParams({ src: 'https://www.example.com' } as WebModel),
    ])
  @Local group6: SettingGroup = new SettingGroup()
    .setTitle('更多')
    .setList([
      new SettingItem()
        .setSupportedType(SupportedSetting.CHECK_VERSION),
      new SettingItem()
        .setSupportedType(SupportedSetting.ABOUT)
        .setExtraParams({
          icpText: '苏ICP备17040376号-135A',
          copyrightText: '华为xx 版权所有 © 2019-2025',
          hotline: '00000000',
        } as AboutModel),
      new SettingItem()
        .setSupportedType(SupportedSetting.WEB)
        .setLabel('服务协议与规则')
        .setExtraParams({ src: 'https://www.example.com' } as WebModel),
    ])

  build() {
    Navigation(this.navPathStack) {
      Column() {
        SettingView({
          pathStack: this.navPathStack,
          settingList: [this.group1, this.group2, this.group3, this.group4, this.group5, this.group6],
          // settingList: [this.group4],
        })

        Button('AppSettingModel')
          .onClick(() => {
            this.getUIContext().getPromptAction().openToast({
              message: `${JSON.stringify(this.appSetting)}`
            })
          })
          .margin({
            bottom: 20
          })
      }
      .width('100%')
      .height('100%')
    }
    .title('示例1（常规设置）')
    .backgroundColor($r('sys.color.background_secondary'))
    .mode(NavigationMode.Stack)
  }
}

仅仅以上还不够，需要稍稍修改下通用组件的逻辑

改动一:

SettingVM.handleDark中回调参数类型是ConfigurationConstant.ColorMode 而我们自定义的设置模型对应类型是number 所以这里修改下回调参数, 直接将对应Select的下标作为回调参数

 handleDark(item: SettingItem) {
    try {
      const options = item.selectOptions ?? lightDarkOptions;
      if (item.selectIndex < options.length && item.selectIndex >= 0) {
        const colorMode = options[item.selectIndex].value as ConfigurationConstant.ColorMode;
        this.uiContext?.getHostContext()?.getApplicationContext().setColorMode(colorMode);
      }

      item.setType(SettingType.SELECT)
        .setLabel(item.label ?? '夜间模式')
        .setSelectOptions(item.selectOptions ?? lightDarkOptions)
        .setSelectEvent((index: number) => {
          const colorMode = lightDarkOptions[index].value as ConfigurationConstant.ColorMode;
          this.uiContext?.getHostContext()?.getApplicationContext().setColorMode(colorMode);
          if (item.onChange) {
            // item.onChange(colorMode); ConfigurationConstant.ColorMode
            item.onChange(index);
          }
        })
    } catch (e) {
      Logger.error(TAG, 'handleDark fail, error: ' + JSON.stringify(e));
    }
  }

若是担心这样会破坏通用组件的完整性，我们也可以换一种修改方式:

// 1.在app_setting组件中的Index.ets新增
export {lightDarkOptions} from './src/main/ets/constants/LightDarkOptions'

// 2.AppSettingSample1.ets中使用
import {lightDarkOptions} form 'app_setting'

new SettingItem()
  .setSupportedType(SupportedSetting.LIGHT_DARK_MODE)
  .setSelectIndex(this.appSetting.themeModel)
  .setOnChange((colorMode) => {
  // 转换为我们需要的对应select的下标
  let index = lightDarkOptions.findIndex(mode => mode.value === colorMode as ConfigurationConstant.ColorMode)
  this.appSetting.themeModel = index
})

改动二

SetttingCard.toggleScene方法中绑定了一个onTouchIntercept事件，不知有什么用，不注释掉开关无法修改。 另外这个是回调的onClick事件，没有onChange事件，所以新增了绑定onClick事件

  // 修改前
  @Builder
  toggleScene(v: SettingItem) {
    Toggle({ type: ToggleType.Switch, isOn: v.switchV })
      .selectedColor(this.configInfo.themeColor)
      .onTouchIntercept(() => {
        if (v.onClick) {
          v.onClick(!v.switchV);
        }
        return HitTestMode.None;
      })
      }

  // 修改后
  @Builder
  toggleScene(v: SettingItem) {
    Toggle({ type: ToggleType.Switch, isOn: v.switchV })
      .selectedColor(this.configInfo.themeColor)
      .onChange(() => {
        v.onChange?.(!v.switchV)
      })
  }

OK，修改完后启动项目，这样设置的持久化就实现了。 欢迎继续讨论，感谢大家！