匿名bean（local bean）

使用@Local装饰的 class 就是匿名bean，因此也称之为local bean。此类 bean 仅在模块内部使用，不存在命名冲突的问题，定义和使用都很便捷

在页面组件中，我们通过一个 cli 命令创建了一个页面组件counter。现在，我们把其中关于 count 状态的逻辑抽离出来，放入一个 local bean 当中，演示逻辑复用的效果

创建Local Bean: counter

可以通过 cli 命令创建 local bean 的代码骨架：

$ 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

@Local()
export class Counter {}

• Local 是装饰器函数。通过 Local 装饰的 class 会自动注册到 bean 容器中

添加响应式代码

把页面组件counter中的代码迁移到 local bean 中

export class Counter {
  count: number = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

INFO

这里定义的属性count是响应式的，从此告别ref.value的书写方式

注入并使用Local Bean

在页面组件counter中注入 local bean，然后在 render 中调用属性和方法

controller.ts

import { Counter } from './counter.js';

export class ControllerPageCounter {
  @Use()
  $$counter: Counter;
}

• Use是装饰器函数。通过 Use 装饰的 属性，系统会自动在 bean 容器中查找或者创建一个实例，然后注入到页面组件中

render.tsx

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>
    );
  }
}

为何bean实例变量名使用$$作为前缀

• 参见：为何bean实例变量名使用$$作为前缀