(旺财记账)标签页+标签编辑页

1. 再次封装 recordListModel

• 写类型的两种方法
  1. 声明一个 type

    type RecordListModel = {
      data:
    }
  

  2. 强制断言

    data: [] as RecordItem[]
  

2. 给 window 加上属性

// custom.d.ts
interface Window {
  tagList: Tag[]
}
// 目的是防止自己手贱

3. 用 window 来封装 api

• tag 里面除了 id 的所有东西

  window.updateTag = (id: string, object: Exclude<Tag, 'id'>){
  
  }
  

• 类型一样进行简写

  interface Window {
    tagList: Tag[],
    createTag: (name: string) => void,
    removeTag: (id:string) => boolean,
    // updateTag: (id:string, name: string) => 'success' | 'not found' | 'duplicated'
    updateTag: TagListModel['update']
  }
  

4. 目前代码存在的问题

1. 全局变量太多
   • 通过挂到 window.store = {}解决
2. 严重依赖 window

5. 目前代码存在的 bug

• 导致原因，数据引用和对象引用，解决办法数据和对象都放 computed,computed 的功能是原来的值变化就会更新外面的值

6. 使用 store 小技巧

• 在 main.ts 中写

import store2 from '@/store/index2.ts'
Vue.prototype.$store2 = store2
// 就可以在任何一个实例中用this.$store2来访问

• 解决类型下划线的问题

  https://cn.vuejs.org/v2/guide/typescript.html#%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8