【项目3】全局数据管理（上）

全局数据管理

• 目前问题：Money和Labels页面在获取标签时分别去localstorage里面取，大家各自为政，因此更新不同步
  也就是两个组件都是自己fetch到数据，然后parse到新对象
• 解决：让他们复制同一个对象即可

1.构造Model

• 将tagListModel和recordListModel内部封装一致
  分别为：data、create、update、save等

2.将数据提到上层

• Money和Labels的上层是App.vue，再上层是main.ts，负责渲染app的
  1.在main.ts里面获取，然后搞个全局变量，分别传给两个组件
  2.把属性放到window上
  3.在需要的地方直接写就行了
• 问题1：window没有tagList属性
  解决：直接在 custom.d.ts （自定义类型）里面声明

3.消除对window的依赖

• 问题1：全局变量太多
• 问题2：严重依赖window
  Nodejs是没有window这个对象的，不应该太依赖window
• 解决：声明一个全局对象store，把这些所有的东西都挂到store上
  store就相当于一个仓库
• 解决2：将store封装，就可以直接用store，消除对window的依赖
• 浅拷贝：直接引用地址
• 不论import文件几次，导出来的都是同一个东西

4.store和models

• store是仓库，models是数据仓库，一般两个只存在一个即可
• 新人常犯问题
  1.this是根据函数确定的，不能乱用函数
  2.函数定义的时候可以调用自己，但对象在定义的时候不能调用自己
• 新语法：可选链
  this.recordList?.push(record2)：判断是否存在
• require:true：必须传属性

5.全局状态管理（也叫全局数据管理）的好处是什么？

• 解耦：将所有数据相关的逻辑放入 store（也就是 MVC 中的 Model，换了个名字而已）
• 数据读写更方便：任何组件不管在哪里，都可以直接读写数据
  有了全局数据管理就不用父、子组件一层一层管理数据，想在哪里处理就在哪里处理
• 控制力更强：组件对数据的读写只能使用 store 提供的 API 进行（当然也不排除有猪队友直接对 tagList 和 recordList 进行 push 等操作，这是没有办法禁止的）