匿名bean(local bean)
使用@Local
装饰的 class 就是匿名bean
,因此也称之为local bean
。此类 bean 仅在模块内部使用,不存在命名冲突的问题,定义和使用都很便捷
在页面组件中,我们通过一个 cli 命令创建了一个页面组件counter
。现在,我们把其中关于 count 状态的逻辑抽离出来,放入一个 local bean 当中,演示逻辑复用的效果
创建Local Bean: counter
可以通过 cli 命令创建 local bean 的代码骨架:
bash
$ zova :create:local page/counter/counter --module=a-demo
- local bean 的名称是
counter
,位于目录page/counter
中,也就是放入页面组件counter
所在的目录
src/suite/a-demo/modules/a-demo/src/page/counter/counter.ts
typescript
@Local()
export class Counter {}
Local
是装饰器函数。通过 Local 装饰的 class 会自动注册到 bean 容器中
添加响应式代码
把页面组件counter
中的代码迁移到 local bean 中
typescript
export class Counter {
count: number = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
INFO
这里定义的属性count
是响应式的,从此告别ref.value
的书写方式
注入并使用Local Bean
在页面组件counter
中注入 local bean,然后在 render 中调用属性和方法
controller.ts
typescript
import { Counter } from './counter.js';
export class ControllerPageCounter {
@Use()
$$counter: Counter;
}
Use
是装饰器函数。通过 Use 装饰的 属性,系统会自动在 bean 容器中查找或者创建一个实例,然后注入到页面组件中
render.tsx
typescript
export class RenderCounter {
render() {
return (
<div>
<div>count(ref): {this.$$counter.count}</div>
<button onClick={() => this.$$counter.increment()}>Increment</button>
<button onClick={() => this.$$counter.decrement()}>Decrement</button>
</div>
);
}
}