Skip to content

关于

使用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的读写变更事件。

工作流程

准备阶段

  1. 当创建AutoStore对象时,会创建一个Proxy对象,用来代理状态数据。
  2. 同时创建一个名称为operatesEventEmitter,就是一个事件分发器,就如何mitteventemitter2
  3. 然后递归遍历状态数据时,会根据数据类型创建不同的对象(支持设置lazy=true,仅在读取时创建):
    • 如果是{}数组则会创建一个Proxy对象,用来代理{}数组的属性和方法,这样就可以实现支持任意嵌套的状态数据。
    • 如果是计算函数则会创建一个ComputedObject对象,同时该ComputedObject对象会实例保存到store.computedObjects中。
    • 如果是监听函数则会创建一个WatchObject对象实例保存到store.watchObjects中。
  4. 当创建ComputedObject对象实例时,会根据同步或异步的方式计算出初始值和收集依赖。
    • 如果是同步计算函数,则会执行一次来自动收集依赖。
    • 如果是异步计算函数,则需要手动指定依赖。 然后,根据依赖的目标路径,调用store.operates.on('依赖路径')来订阅变更事件

INFO

计算函数等同于Vuecomputed,当所依赖的数据变化时执行,一般依赖是确定的。而监听函数等同于Vuewatch,用来监听状态数据的变化,可以监听动态范围的依赖变化。

更新阶段

接下来,当状态数据发生变化时,后续流程如下:

  1. store.state.count=100更新状态值时,该操作会被Proxy对象set方法拦截,计算出更新的状态值的路径['count']
  2. 然后在store.operates触发emit('<状态路径>',<operateParams>)方法,通知所有订阅者。
  3. 对应的ComputedObject订阅者收到通知后,会执行计算函数Getter
  4. 最后将计算函数Getter的执行结果保存到store.state中的原始路径上。