关于

AutoStore提供了无与伦比的计算属性实现方式，支持同步计算属性和异步计算属性，具备丰富的计算重试、超时、加载中、错误等状态管理。

基本原理

提示

AutoStore实现了最独特的移花接木式的计算属性实现方式，可以直接在状态中声明计算属性。然后计算结果写入声明所在地。

基本过程如下：

1. 首先直接在State中声明计算属性函数，如total=computed(scope)=>scope.price*scope.count。
2. 调用createStore创建AutoStore时，会使用Proxy代理State对象，用来拦截对State对象的读写操作，建立一个状态变更的事件发布/订阅机制。
3. 然后在初始化时扫描整个State数据，如果是函数或者ObserverDescriptorBuilder对象（即computed和watch封装的函数），则会创建ComputedObject或WatchObject,然后根据依赖订阅事件。
4. ComputedObject会根据状态上下文和依赖收集，侦听状态变更事件。
5. 当State中的数据变化时，会自动触发计算属性的重新计算，将计算结果赋值给State中的对应属性。

在上图中，当price和count变化时，会自动触发total的重新计算，将计算结果赋值给total属性。这样，当我们访问state.total时,就是计算结果，而不是一个函数了。

以上就是@autostorejs/react计算属性移花接木的过程原理

同步计算

同步计算属性移花接木的过程如下：

const state = {
  order:{
    price:10,
    count:1,
    total:computed((scope)=>{
      return scope.price*scope.count
    })
  }
}

此时的total就是一个普通函数,typeof(state.total)==='function'。

const { state } = createStore({
  order:{
    price:10,
    count:1,
    total:computed((scope)=>{
      return scope.price*scope.count
    })
  }
})

运行createStore后会扫描整个对象，如果发现computed声明，则：

1. createStore会根据状态上下文和computed函数创建一个SyncComputedObject对象,保存在store.comnutedObjects里面。
2. 运行一次同步计算函数收集依赖，然后将返回值写入state.total,此时typeof(state.total)==='number'。

异步计算

异步计算属性移花接木的过程如下：

const state = {
  order:{
    price:10,
    count:1,
    total:computed(async (scope)=>{
      return scope.price*scope.count
    },['./price','./count'])
  }
}

此时的total就是一个普通函数,typeof(state.total)==='function'。

const { state } = createStore({
  order:{
    price:10,
    count:1,
    total:computed(async (scope)=>{
      return scope.price*scope.count
    },['./price','./count'])
  }
})

运行createStore后会扫描整个对象，如果发现computed声明，则：

1. 根据computed声明结合状态上下文创建一个AsyncComputedObject对象,保存在store.comnutedObjects里面。
2. 将state.total替换成AsyncComputedValue。

state.total={
  value:10,
  loading:true,
  error:null,
  timeout:0,
  retry:0
  progress,
  run,
  cancel  
}

更多介绍请参考异步计算。