创建

概述

使用computed或asyncComputed函数创建计算属性。

• 同步计算属性

// 同步计算属性
function computed<Value = any, Scope = any>(
    getter: ComputedGetter<Value, Scope>, // 计算函数
    options?: SyncComputedOptions<Value, Scope>,
): Value;

• 异步计算属性

// 简单异步计算
function computed<Value = any, Scope = any>(
    getter: AsyncComputedGetter<Value, Scope>, // 计算函数
    depends: ComputedDepends, // 指定依赖
    options?: ComputedOptions<Value, Scope>,
): ComputedDescriptorBuilder<Value, Scope>;
// 增强异步计算
function asyncComputed<Value = any, Scope = any>(
    getter: AsyncComputedGetter<Value, Scope>,
    depends: ComputedDepends,
    options?: ComputedOptions<Value, Scope>,
): AsyncComputedDescriptorBuilder<Value, Scope>;

指南

同步计算属性

直接在状态中声明计算属性。

使用computed(<getter>,<options>)函数声明同步计算属性。

const store = new AutoStore({
    order: {
        price: 100,
        count: 3,
        // 1. 快速创建，自动收集依赖
        total1: (order) => order.price * order.count,
        // 2. 使用computed函数创建计算属性,并指定创建
        total2: computed((order) => order.price * order.count),
    },
});

以下是一个同步计算属性的示例：

loading

更详细介绍请参考同步计算属性

提示

同步计算属性的依赖收集是自动的，基本方法就是会在初始化时执行一次，然后通过内部的proxy拦截访问来收集依赖。

异步计算属性

异步计算属性可以有两种方法：

• 简单异步计算 - computed

使用computed(<getter>,<depends>,<options>)函数声明异步计算属性。

const store = new AutoStore({
  user:{
    firstName:"Zhang",
    lastName:"Fisher",
    // 1.快速创建，无依赖
    fullName:async (user)=>user.firstName+user.lastName
    // 2.使用computed函数创建计算属性,依赖和选项
    fullName:computed(async (user，args)=>{
        user.firstName+user.lastName,
      },
      ['./firstName','./lastName'],
      {...options....})
  }
})

更详细介绍请参考异步计算属性

• 增强异步计算 - asyncComputed

const store = new AutoStore({
  user:{
    firstName:"Zhang",
    lastName:"Fisher",
    // 使用asyncComputed函数创建计算属性,依赖和选项
    fullName:asyncComputed(async (user，args)=>{
        user.firstName+user.lastName,
      },
      ['./firstName','./lastName'],
      {...options....})
  }
})

提示

不同于同步计算，创建异步计算属性时需要指定依赖。

动态创建计算对象

也可以不在状态中声明computed，而是使用store.computedObjects.create动态创建计算属性。

create方法的签名如下：

// 创建同步计算对象
function create<Value = any, Scope = any>(
    getter: ComputedGetter<Value, Scope>,
    options?: SyncComputedOptions<Value, Scope>,
): SyncComputedObject<Value, Scope>;
// 创建异步计算对象
function create<Value = any, Scope = any>(
    getter: AsyncComputedGetter<Value, Scope>,
    depends: ComputedDepends,
    options?: ComputedOptions<Value, Scope>,
): AsyncComputedObject<Value, Scope>;
// 使用创建计算对象
function create<Value = any, Scope = any>(
    descriptor: ComputedDescriptor<Value, Scope>,
): AsyncComputedObject<Value, Scope> | SyncComputedObject<Value, Scope>;

动态创建计算属性的三种方法：

动态创建同步计算

import { new AutoStore } from "@autostorejs/react";

const store = new AutoStore({
    order: {
        price: 100,
        count: 3,
    },
});

// 简单的同步计算
const totalObj = store.computedObjects.create((order) => order.price * order.count);

动态创建异步计算

import { new AutoStore } from "@autostorejs/react";

const store = new AutoStore({
    order: {
        price: 100,
        count: 3,
    },
});

// 简单的异步计算
store.computedObjects.create(
    async (order) => order.price * order.count,
    ["order.price", "order.count"][("./price", "./count")], //  ✅ 使用绝对依赖 // ❌ 不支持相对依赖
);

使用computed创建

上述两种方式内部也是使用computed来创建的，其等效于:

// 同步计算
store.computedObjects.create(computed((order) => order.price * order.count));

//  异步计算
store.computedObjects.create(
    computed(
        async (order) => order.price * order.count,
        ["order.price", "order.count"][("./price", "./count")], //  ✅ 使用绝对依赖 // ❌ 不支持相对依赖
    ),
);

使用computed可以进行更多的配置，比如options等。

小结

动态创建计算属性时与在状态中声明计算属性相比，存在以下区别：

• 动态创建计算属性不存在状态上下文，指依赖时不使用相对依赖，只能使用绝对依赖，即./、./、PARENT等依赖是无效的。
• 动态创建计算对象的associated=true
• 动态创建计算对象的功能与在状态中声明创建的功能基本相同，但计算结果没有存储在状态中，而是存储在计算对象中。可以通过obj.value来获取计算结果。

更详细介绍请参考动态创建计算对象

提示

使用computed(<getter>,<depends>,<options>)创建计算属性时，涉及到:

• getter：计算函数, 在依赖更新时执行。详见计算函数
• depends：依赖, 详见依赖
• options：各种控制选项, 详见选项