HarmonyOS关于LocalStorage的一些学习感悟

// 下文中prop、link分别对应LocalStorageProp和LocalStorageLink
// 给定初始值则需要在@Entryh(storage)才可成功建立数据绑定，link和prop的初始化无作用
let storage = new LocalStorage({ list: { name: '张三', child: [{ name: 'child', address: '云南' }] } })
let numStorage = new LocalStorage({ num: 45 })

@Component
struct childT {
  @LocalStorageProp('list') list: object = {}
  @LocalStorageLink('num') num: number = 10

  build() {
    Column() {
      Row() {
        Text(this.list['child'][0].address +'---')
        Text(this.list['name'] +'---')
        Text(this.num + '')
        Blank()
        Button('change').onClick(() => {
          this.list['child'][0].address = 'changed'
          // 打开此行则对this.list['name'] = '李四'的更改生效  双向绑定，反之则不生效
          // this.list['name'] = '李四'
          this.num++
          // console.log(JSON.stringify(this.list))
        })
      }.width('100%')
    }
  }
}

// 一个页面其实是可以给多个new LocalStorage的，但是一般只new一个即可
// @Entry后面可接参数以及不接参数，接参数只接收一个常规参数，接参数的作用是使numStorage可以从@Component访问，
// （经测试发现其实不接也可以访问）接参数取numStorage的初始值为link以及prop默认的值。
// 经测试接与不接的部分可成立情况：有个奇怪的情况请观察父子组件中this.list['name'] = '李四'
// 如果把这行代码打开，则对this.list['child'][0].address = 'changed'以及name的的更改在父子组件中都会生效，即link双向绑定成立
// 猜测是Object.keys（）第一层级的属性更改被观察到了（导致后面层级的更改也被观察到），而直接对第二层级以及后面层级的更改是没有被观察到的
// 把this.list['name'] = '李四'注释则对第二层及以及后面层级的更改失效了（也就是失去响应式），但是console打印会发现其实已经被改了
// 只是这个更改没有被观察到所以ui不刷新，这个情况就和官方文档前面的装饰器一样......（挺不友好的，因为需要再次处理）
// 接参数情况下link和prop对存储值的初始化将不起作用，@Entry后面不接参数，则使用link和prop初始化的值

// 测试@Entry不接嵌套数组storage作为参数的Link的情况（prop可自行测试，会link基本就会prop），如果接的话则需要在
// new LocalStorage实例化的时候给初始值，不给则无论怎么访问都是空或者undefinded
@Entry(storage)
@Component
struct parent {
  @LocalStorageLink('list') list: object = { name: 'dasddsa' }
  @LocalStorageLink('num') num: number = 10

  build() {
    Column() {
      Row() {
        Text(this.list['child'][0].address +'---')
        Text(this.list['name'] +'---')
        Text(this.num + '')
        Blank()
        Button('change').onClick(() => {
          this.list['child'][0].address = 'changed'
          // 打开此行则对this.list['name'] = '李四'的更改生效  双向绑定，反之则不生效
          // this.list['name'] = '李四'
          this.num++
        })
      }.width('100%')

      Divider()
      childT()
    }.border({ width: 1, color: '#ff35bbdd' }).margin(20).padding(20)
  }
}

//下面测试@Entry后面不接参数的情况

// 给定初始值则需要在@Entryh(storage)才可成功建立数据绑定，link和prop的初始化无作用
let storage = new LocalStorage({ list: {} })
let numStorage = new LocalStorage({ num: 45 })

@Component
struct childT {
  @LocalStorageLink('list') list: object = { name: '张三', child: [{ name: 'child', address: '云南' }] }
  @LocalStorageLink('num') num: number = 10

  build() {
    Column() {
      Row() {
        Text(this.list['child'][0].address + '---')
        Text(this.list['name'] + '---')
        Text(this.num + '')
        Blank()
        Button('change').onClick(() => {
          this.list['child'][0].address = 'changed'
          // 打开此行则对this.list['name'] = '李四'的更改生效  双向绑定，反之则不生效
          this.list['name'] = '李四'
          this.num++
          // console.log(JSON.stringify(this.list))
        })
      }.width('100%')
    }
  }
}

@Entry
@Component
struct parent {
  @LocalStorageLink('list') list: object = { name: '张三', child: [{ name: 'child', address: '云南' }] }
  @LocalStorageLink('num') num: number = 10

  build() {
    Column() {
      Row() {
        Text(this.list['child'][0].address + '---')
        Text(this.list['name'] + '---')
        Text(this.num + '')
        Blank()
        Button('change').onClick(() => {
          this.list['child'][0].address = 'changed'
          // 打开此行则对this.list['name'] = '李四'的更改生效  双向绑定，反之则不生效
          this.list['name'] = '李四'
          this.num++
        })
      }.width('100%')

      Divider()
      childT()
    }.border({ width: 1, color: '#ff35bbdd' }).margin(20).padding(20)
  }
}
// 测试结果@Entry后接不接参数对于第二层级以及后面层级属性更改都是观察不到的，只有当第一层级属性修改被观察到之后第二层级以及之后层级属性

// 的更改才可以被观察到，对于一维数组以及多维数组的属性更改情况可参考嵌套数组，当然数组对象属性的更改也是观察不到的，除非对数组对象整体进行删除或者push

//一个新对象以及对整体进行更改才可以被观察到，总的来说能被观察到的并引起ui刷新的只有第一层级的更改

// 新人小白创作不易，一个想进华为的小白，一个把进华为当作奋斗目标的小白！！！我真的是一个啥也不懂的小白，别喷我