yarn install mobx-cocos
// cfg.ts
// mobx 相关配置
import { configure } from "mobx";
configure({ enforceActions: "observed" });
// componentStore.ts
// 数据源
import { observable } from "mobx";
class ComponentStore {
@observable public array: number[] = [0, 1, 2];
@observable public counter = 0;
@observable public shadowCounter = this.counter;
}
export const componentStore = new ComponentStore();
// Component.ts
import { observer, render, reactor, react } from "mobx-cocos";
import { componentStore as store } from "./componentStore";
import { action, observable } from "mobx";
const { ccclass } = cc._decorator;
/**
* 由 @observer 注解的类, 会将 @render 和 @reactor 所注解的方法 纳入生命周期来管理
*/
@ccclass
@observer
export class Component extends cc.Component {
@observable private index = 0;
protected onLoad(){
// 没间隔1秒钟增加this.index
this.schedule(this.addIndex, 1);
}
// @render 注解的方法会在 onLoad执行之后自动调用一次, 并在 counter每次发生变化的时候执行
@render protected renderCounter(){
console.log("store.counter = " + store.counter);
}
// 监听 store.shadowCounter
@render protected renderShadowCounter(){
console.log("store.shadowCounter = " + store.shadowCounter0);
}
// 监听 store.array[this.index % store.array.length] 的数值, 来修改 store.counter的数值
@reactor
protected componentCounterReactor(){
return react(()=> store.array[this.index % store.array.length], (value)=> store.counter = value);
}
/**
* 如下方式的简写
* @reactor fn(){
* return react(()=> store.counter, (v)=> store.shadowCounter = v)
* }
*/
@reactor(()=> store.counter)
protected counterReactor(counter: number){
store.shadowCounter = counter;
}
@action private addIndex(){
store.index++;
}
}