test(mobx): 测试配合mobx实现响应式

package.json

@@ -68,6 +68,7 @@
     "copy-to-clipboard": "^3.3.3",
     "htm": "^3.1.1",
     "lodash-es": "^4.17.21",
+    "mobx": "^6.13.6",
     "omi": "^7.7.5",
     "omi-transition": "^0.1.11",
     "tailwind-merge": "^2.2.1",

src/button/README.md

@@ -6,6 +6,10 @@ usage: { title: '', description: '' }
 spline: base
 ---
 
+### 测试mobx使用
+
+{{ mobx }}
+
 ### 基础使用
 
 {{ base }}

src/button/_example/mobx.tsx

@@ -0,0 +1,45 @@
+import 'tdesign-web-components/button';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/input';
+
+import { autorun } from 'mobx';
+import { Component } from 'omi';
+
+import { myStore } from '../store';
+
+export default class TestMobx extends Component {
+  btnClick = () => {
+    console.log('btn click');
+    myStore.update({
+      message: '修改后',
+    });
+  };
+
+  inputChange = (v: string) => {
+    console.log(v);
+    myStore.update({
+      message: v,
+    });
+  };
+
+  // 使用autorun来响应状态变化
+  installed() {
+    console.log('installed');
+    autorun(() => {
+      this.update();
+      console.log('触发autorun');
+    });
+  }
+
+  render() {
+    return (
+      <t-space direction="vertical">
+        <t-button theme="default" variant="text" onClick={this.btnClick}>
+          修改message
+        </t-button>
+        <t-input value={myStore.message} onChange={this.inputChange} />
+        {myStore.message}
+      </t-space>
+    );
+  }
+}

src/button/store.ts

@@ -0,0 +1,15 @@
+import { makeAutoObservable } from 'mobx';
+
+export class Store {
+  message = 'Initial message';
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  update = (props: Partial<Store>): void => {
+    Object.assign(this, props);
+  };
+}
+
+export const myStore = new Store();