Skip to content

监视对象

关于

如同ComputedObject一样,所有在状态中直接使用watch声明的均会创建一个对应WatchObject对象。

通过Store.watchObjects可以访问所有声明的WatchObject对象,可以进行相关的动态移除/禁用等操作。

以下是实现表单数据的脏检察的简单示例:

动态创建监听对象

computed一样,不在状态中声明watch,也可以使用store.watchObjects.create动态创建监听对象

create方法签名如下:

ts
  create<Value=any,DependValue=any>(
    getter:WatchGetter<Value,DependValue>,
    filter?:WatchDependFilter<DependValue>,
    options?:Omit<WatchOptions<Value>,'filter'>
):WatchObject<Value>

示例如下:

ts
import { createStore } from '@autostorejs/react';

const store = createStore({
  user:{
    firstName:"Zhang",
    lastName:"Fisher"
  }
})


const obj = store.watchObjects.create((user)=>user.firstName+user.lastName)
 
const obj = store.watchObjects.create(
  (user)=>user.firstName+user.lastName,  // 计算函数
  ['./firstName','./lastName'],                // ❌ 不支持相对依赖
  ['user.firstName','user.lastName'],          // ✅ 使用绝对依赖
  {...options....}                             // 参数
)

动态创建监听对象时与在状态中声明监听对象相比,存在以下区别

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

手动执行

ComputedObject一样,WatchObject也可以手动执行,通过store.watchObjects.get("<id>").run()来执行监听函数。