![\"MOBX\"](\"https://mobx.js.org/assets/mobx.png\")
mobx-miniprogram-lite\n\n[](https://github.com/XHFkindergarten/mobx-miniprogram-lite/blob/master/LICENSE) [](https://www.npmjs.com/package/mobx-miniprogram-lite) []()\n\n\n 简体中文 |\n English |\n Example\n
\n\n- 基于 [mobx](https://zh.mobx.js.org/README.html) 实现数据的深度监听，响应式更新视图。\n- 支持 [computed](https://mobx.js.org/computeds.html) 派生计算。\n- 公共状态管理。\n- 基于原生 JS 编写小程序逻辑层，获得更好的代码组织结构。\n\n## 安装\n\n```\nnpm install mobx-miniprogram-lite\n```\n\n## 快速开始\n\n### 1.定义可观测的数据\n\n```typescript\nimport { observable } from 'mobx-miniprogram-lite'\n\nexport const countStore = observable({\n // 被观测的数据\n value: 0,\n // 计算属性\n get double() {\n return this.value * 2\n },\n // 修改数据的方法\n addValue() {\n this.value++\n }\n})\n```\n\n### 2.将数据与 `Page/Component` 绑定\n\n- Page 页面实例\n\n```typescript\nimport { connectPage } from 'mobx-miniprogram-lite'\nimport { countStore } from './count'\n\nconnectPage({\n store: {\n count: countStore\n }\n})\n```\n\n- Component 组件实例\n\n```typescript\nimport { connectComponent } from 'mobx-miniprogram-lite'\nimport { countStore } from './count'\n\nconnectComponent({\n store: {\n count: countStore\n }\n})\n```\n\n### 3.渲染和交互\n\n- 在组件方法中调用数据方法\n\n```typescript\nimport { connectPage } from 'mobx-miniprogram-lite'\nimport { countStore } from './count'\n\nconnectPage({\n store: {\n count: countStore\n },\n bindTapAdd() {\n this.store.count.addValue()\n }\n})\n```\n\n- 在 WXML 中绑定数据和交互事件\n\n```html\n