数据保存至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")
