【项目】记账④

知识点

1. iconfont 小技巧，编辑 SVG
2. custom.d.ts 怎么用
3. @click.native 怎么用
4. Vue Router 怎么用
5. props 怎么用

如何封装model

views 目录新建 model.ts 文件

改写成TS

如何把 RecordItem 这个类型在所有地方都可以用

根目录新建 custom.d.ts 全局声明

把上面全局使用的类型都放进去

引入scss需要配置好webpack

--------------Labels.vue ----------------

HTML

给排列都包个span

然后给上styles

------------------------------------------------------------------------

新建一个model.ts的变量，创建一个目录 把两个model都放进去

遍历tags

tagListModel.fetch(); 必须在 tags = tagListModel.data; 之前执行

如何处理新建标签名字重复

将tag的string改为{id，name}

编辑标签

然后把跳转页面关联起来

封装备注

如何把被用的组件赋用到标签名里面

money传一个field-name，placeholder

改造 Notes.vue 使其成为通用组件

点击button触发Button

知识点

1. 全局数据管理/全局状态管理是啥
2. store 是啥
3. store 怎么模块化
4. 如何封装

把model构造成封装好的，再次封装recordListModel

如何解决标签页新建与记账页同步（用window来容纳数据）

在main.ts添加全局变量

window.tagList = tagListModel.fetch();

在custom.d.ts声明

type Tag = {
  id: string;
  name: string;
type TagListModel = {
  data: Tag[]
  fetch: () => Tag[]
  create: (name: string) => 'success' | 'duplicated' // 联合类型
  update: (id: string, name: string) => 'success' | 'not found' | 'duplicated'
  remove: (id: string) => boolean
  save: () => void
interface Window {
  tagList: Tag[]
}

• 只需要做两件事情：

1. 第一件事情：在一个比较高层的地方写上去获取到这个对象 window.tagList = tagListModel.fetch(); 把它放到window上，然后在任何需要使用的地方直接拿 window.tagList 先写在读

• 标签过多会导致新建标签在滚轮最下面，这个在重新优化

用window来封装API

• 封装 window.createTag

• 封装 window.removeTag

• 封装 window.updateTag

• 封装 window.findTag

简洁为以下代码↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

created() {//findTag从路由拿id，然后放在tag上
      this.tag = window.findTag(this.$route.params.id);
      if (!this.tag) {//如果Tag找不到，就404
        this.$router.replace('/404');
    }

完成封装tagList的增删改查

• 当前问题：

1. 全局变量太多
2. 严重依赖window

如何消除对window的依赖

• 挂在一个对象上 window.store

这样就成了只有store全局变量，其他都是store的属性

• 声明store的类型（就是包含其他）

在 store 目录新建TS文件，把 window.store 都放进去

删掉 window ，用 const store ，在用 export default store 导出

任何人想用数据直接引入 store

store的类型会自动推测

把其他文件 window 都换成 store

• 将所有数据操作封装在 store 里

将 model 融合进 store

• store的意思是储存，仓库
• model的意思是数据，存储

store 的 bug 之值与地址

//index2.ts
const store = {
  count: 0,