添加一个讲解如何使用MobX的Demo

MobXDemo1/assets/Script/Helloworld.ts

@@ -0,0 +1,38 @@
+import { observer, render } from "./Observer";
+import { StoreHello } from "./StoreHello";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+@observer
+export default class Helloworld extends cc.Component {
+
+    @property(cc.Label)
+    label: cc.Label = null;
+
+    @property
+    text: string = 'hello';
+
+    __preload() {
+        console.log('__preload');
+    }
+
+    onLoad() {
+        console.log('onLoad');
+    }
+
+    start() {
+        console.log('start');
+        // this.label.string = this.text;
+    }
+
+    @render
+    showCount() {
+        console.log('hello', StoreHello.getInstance().count);
+        this.label.string = '' + StoreHello.getInstance().count;
+    }
+
+    onBtnAcount() {
+        StoreHello.getInstance().addCount();
+    }
+}

MobXDemo1/assets/Script/Helloworld.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "e1b90feb-a217-4493-849d-9a611900d683",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

MobXDemo1/assets/Script/Observer.ts

@@ -0,0 +1,46 @@
+import { autorun, IReactionDisposer } from 'mobx'
+import * as mobx from 'mobx'
+if (cc.sys.isBrowser) { (window as any).mobx = mobx }
+//
+mobx.configure({ enforceActions: "observed" })
+
+export const observer = <T extends { new(...args: any[]): cc.Component }>(constructor: T) => {
+    return class extends constructor {
+        _disposer: IReactionDisposer[] = []
+        _reaction?: string[]
+        _autorun?: string[]
+        onLoad() {
+            super.onLoad && super.onLoad()
+            if (this._autorun) {
+                this._disposer.push(...this._autorun.map((x) => autorun((this as any)[x].bind(this))))
+            }
+            if (this._reaction) {
+                this._disposer.push(...this._reaction.map((x) => { return (this as any)[x]() }))
+            }
+        }
+        onDestroy() {
+            super.onDestroy && super.onDestroy()
+            if (this._disposer) this._disposer.forEach(x => x())
+            this._disposer.length = 0
+        }
+    }
+}
+
+export const render = (target: any, key: string, descriptor: TypedPropertyDescriptor<() => void>) => {
+    let obs: string[] = target['_autorun']
+    if (!obs) { obs = target['_autorun'] = [] }
+    obs.push(key)
+}
+
+export const reactor = (target: any, key: string, descriptor: TypedPropertyDescriptor<() => IReactionDisposer>) => {
+    let obs: string[] = target['_reaction']
+    if (!obs) { obs = target['_reaction'] = [] }
+    obs.push(key)
+}
+
+/**
+ * 和reactor搭配进行副作用操作
+ */
+export const react = <T>(expression: (r: mobx.IReactionPublic) => T, effect: (arg: T, r: mobx.IReactionPublic) => void) => {
+    return mobx.reaction(expression, effect, { fireImmediately: true })
+}

MobXDemo1/assets/Script/Observer.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "60ed0017-636b-40f1-a2f1-9b61c9159825",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

MobXDemo1/assets/Script/StoreHello.ts

@@ -0,0 +1,21 @@
+import { observable, action } from "mobx";
+
+export class StoreHello {
+
+    private static instance: StoreHello = null;
+    public static getInstance() {
+        if (this.instance == null) {
+            this.instance = new StoreHello();
+        }
+        return this.instance;
+    }
+
+    @observable
+    public count: number = 0;
+
+    @action
+    public addCount() {
+        this.count = this.count || 0;
+        this.count++;
+    }
+}

MobXDemo1/assets/Script/StoreHello.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "426b89de-fdbb-4c6b-b198-7216cb4bd509",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}