旺财记事本(数据保存至LocalStorage)

1. 获取用户最新选择的 Tags

// Tags.Vue
this.$emit('xxx', this.selectedTags)
//Money.Vue
<Tags :data-source.sync="tags" @xxx="yyy"/>
yyy(zzz:string[]){
  console.log(zzz);
}

• 改名:

// Tags.Vue
this.$emit('update:selected', this.selectedTags)
//Money.Vue
<Tags :data-source.sync="tags" @update:selected="onUpdateTags"/>
onUpdateTags(tags:string[]){
  console.log(tags);
}

2. 同理获取用户最新输入的 Notes,Types,NumberPad

// Money.vue
<Layout class-prefix="layout">
  <NumberPad @update:value="onUpdateAmout"/>
  <Types @update:value="onUpdateType"/>
  <Notes @update:value="onUpdateNotes"/>
  <Tags :data-source.sync="tags" @update:value="onUpdateTags"/>
</Layout>
export default class Money extends Vue{
    tags = ["衣","食","住","行"]

    onUpdateTags(value:string[]){
      console.log(value);
    }

    onUpdateNotes(value:string){
      console.log(value);
    }

    onUpdateType(value:string){
      console.log(value)
    }
    onUpdateAmout(value:string){
      console.log(value)
    }
  }

3. TS 中如何使用 Watch

• Notes.vue 的 input 中每次用户输入都要向 Money.vue 更新数据

// Tag.vue
export default class Notes extends Vue{
  value = '';
  @Watch('value')
  onValueChanged(value:string ){
    this.$emit('update:value',value)
  }
}

4. TS 中的类型声明-将所有数据记录

type Record = {
  tags!: string[] // ！表示可以没有这个属性
  notes: string
  type: string
  amount: number
}

record: Record = {
  tags: [],notes:'',type:'-',amount:0
}

5. 把值重新传回 types,方便维护

• 如果你想给组件一个初始值，然后更新的时候时候，又要拿到最新的值，就用.sync

  //Types.Vue
  // 这样就不需要之前的watch
   export default class Types extends Vue {
    @Prop() readonly value!: string;
    selectType(value: string) {
      if (value !== "-" && value !== "+") {
        throw new Error("type is unknown")
      }
      this.$emit('update:value', value)
    }
  }
  // Money.Vue
    <Types :value="record.type" @update:value="onUpdateType"/>
  // 可以简写成
  <Types :value.sync="record.type" />

6. 解决 push 进数组数据一样的 bug

• 此 bug 产生的原因,push 进去的实际上是一个内存地址
  
• 解决的办法:深拷贝

    saveRecord(){
      const record2  = JSON.parse(JSON.stringify(this.record));
      this.recordList.push(record2)
      console.log(this.recordList)
    }

7. 解决增加时间引起的数据库版本的问题

• 不要一下子升级到最新版，要一个个版本的升级。
  

  if (version === "0.0.1") {
    // 数据库升级, 数据迁移
    recordList.forEach(record => {
      record.createdAt = new Date(2020, 0, 1);
    })
    // 保存数据
    window.localStorage.setItem("recordList", JSON.stringify(recordList))
  }
  window.localStorage.setItem("version", "0.0.2")

最后,个人微信,欢迎交流！