关于
使用AutoStore的起手式就是创建一个AutoStore对象,AutoStore类是AutoStore的核心对象,所有的功能都是基于AutoStore对象来实现的。
在使用AutoStore之前我们简单关于一下AutoStore的基本原理和工作流程。
对象结构
AutoStore对象的基本工作原理结构如下:

AutoStore对象的核心部件由以下几个部分组成:
state:状态数据的Proxy代理对象,负责拦截状态数据的读写操作。computedObjects:计算属性对象的集合,用来存储所有的计算属性对象。watchObjects:监听对象的集合,用来存储所有的监听对象。operates:状态读写事件触发器,相当于一个内部的事件总线,用来订阅和发布状态数据的变更事件。当a.b.c的值进行读写操作时,会触发operates.emit('a.b.c')事件,通知所有订阅者。因此我们可以通过operates.on('a.b.c')来订阅a.b.c的读写变更事件。
工作流程
准备阶段
- 当创建
AutoStore对象时,会创建一个Proxy对象,用来代理状态数据。 - 同时创建一个名称为
operates的EventEmitter,就是一个事件分发器,就如像mitt、eventemitter2。 - 然后递归遍历状态数据时,会根据数据类型创建不同的对象(支持设置
lazy=true,仅在读取时创建):- 如果是
{}或数组则会创建一个Proxy对象,用来代理{}或数组的属性和方法,这样就可以实现支持任意嵌套的状态数据。 - 如果是
计算函数则会创建一个ComputedObject对象,同时该ComputedObject对象会实例保存到store.computedObjects中。 - 如果是
监听函数则会创建一个WatchObject对象实例保存到store.watchObjects中。
- 如果是
- 当创建
ComputedObject对象实例时,会根据同步或异步的方式计算出初始值和收集依赖。- 如果是同步计算函数,则会执行一次来自动收集依赖。
- 如果是异步计算函数,则需要手动指定依赖。
然后,根据依赖的目标路径,调用
store.operates.on('依赖路径')来订阅变更事件
INFO
计算函数等同于Vue的computed,当所依赖的数据变化时执行,一般依赖是确定的。而监听函数等同于Vue的watch,用来监听状态数据的变化,可以监听动态范围的依赖变化。
更新阶段
接下来,当状态数据发生变化时,后续流程如下:
- 当
store.state.count=100更新状态值时,该操作会被Proxy对象set方法拦截,计算出更新的状态值的路径['count'], - 然后在
store.operates触发emit('<状态路径>',<operateParams>)方法,通知所有订阅者。 - 对应的
ComputedObject订阅者收到通知后,会执行计算函数Getter, - 最后将
计算函数Getter的执行结果保存到store.state中的原始路径上。