旺財記事本(數據保存至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")

最後,個人微信,歡迎交流！