8.1 再次封装recordListModel

如何让两个页面的数据同步，用全局数据管理

money.vue是从tagListModel里去取数据

label.vue的从recordListModel里去取的数据

const recordList = recordListModel.fetch();

全局数据管理先把两个model统一一下，重新封装recordListModel 记了一笔账，统计就显示出来了

封装create (因为每次新增过程又用clone，又要push)

封装clone

最好建个.ts全局引入

8.2 用 window 来容纳数据

上面两个money.vue，label.vue 从同一个对象分别生成了对象1,和对象2

为了优化

可以上提到App.vue  ，
最好提到更上一层main.ts上
在main.ts上获取对象，传给money.vue，label.vue

在main.ts里声明会报错,要声明window上tagList属性

因此全局声明将tag属性都复制到custom.ts中

然后Money.vue和Label.vue都不用自己fetch数据，而是通过window.tagList去获取

8.3 用window来封装API 1

统一create 创建create全局接口不需要知道taglistModel 封装createTag

同理封装removeTag和updateTag、findTag

removeTag

updateTag

findTag

8.4 用window来封装API 2

对recordListModel进行封装

8.5 消除对window的依赖

封装好后导致 1、全局变量太多 2、严重依赖window

消除对 window 的依赖：把所有变量挂到window.store上面

解决对window的依赖，新建index2.ts

将整个store复制进去

新建recordStore和tagStore分别将store的内容分别复制进去

再在store里去引入把Money.vue,Labels.vue,EditLabel.vue里使用的window都换成store 新建recordStore和tagStore分别将store的内容分别复制进去再在store里去引入去掉recordListModel将其内容都放入recordStore里同理也去掉tagListModels

8.6 将model融合进store

8.7 修复Tags.vue的bug

8.8 store的bug之值与地址

解决Money页面新增标签的bug

由于全局数据管理无需从外部获取数据

其中store里会有值传递（string/number/boolen）和地址传递（Object(array,function)） 的问题

count复制的是值，当store.count发生变化与count无关

解决方法不用data去获取数据，改用computed

8.9 小技巧：把store2编程this.$store2

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

8记账 Vue 项目-Vue 全局数据管理（上）