{"id":13511381,"url":"https://github.com/lbqdly/mobx-wxapp","last_synced_at":"2025-03-30T20:33:04.876Z","repository":{"id":57299719,"uuid":"128517064","full_name":"lbqdly/mobx-wxapp","owner":"lbqdly","description":"在小程序中使用mobx","archived":false,"fork":false,"pushed_at":"2019-05-27T03:12:23.000Z","size":136,"stargazers_count":56,"open_issues_count":1,"forks_count":10,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-05-09T15:43:52.406Z","etag":null,"topics":["connect","miniprogram","mobx","mobx-react","weapp","wechat","wxapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbqdly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-07T10:13:59.000Z","updated_at":"2023-09-29T01:18:30.000Z","dependencies_parsed_at":"2022-08-26T21:51:14.547Z","dependency_job_id":null,"html_url":"https://github.com/lbqdly/mobx-wxapp","commit_stats":null,"previous_names":["b5156/mobx-wxapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbqdly%2Fmobx-wxapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbqdly%2Fmobx-wxapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbqdly%2Fmobx-wxapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbqdly%2Fmobx-wxapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbqdly","download_url":"https://codeload.github.com/lbqdly/mobx-wxapp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246379370,"owners_count":20767694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["connect","miniprogram","mobx","mobx-react","weapp","wechat","wxapp"],"created_at":"2024-08-01T03:00:48.834Z","updated_at":"2025-03-30T20:33:04.620Z","avatar_url":"https://github.com/lbqdly.png","language":"JavaScript","funding_links":[],"categories":["mini-programe"],"sub_categories":[],"readme":"# mobx-wxapp\n\n在小程序中使用[mobx](https://github.com/mobxjs/mobx)，`connect`函数可将被观察的数据高效的绑定到小程序视图。\n旧的`inject`方式见[v1](https://github.com/b5156/mobx-wxapp/tree/v1)\n\n### 安装\n\n`npm install mobx-wxapp` 安装项目到本地 或 直接拷贝文件(example/mobx-wxapp.js)到您的项目。\n\n(案例使用了 mobx.js v4.6.0 ,因 mobx5 使用了小程序暂不支持的 ES6 proxy)\n\n### 用法\n\npages/index.js:\n\n```JavaScript\nimport { connect, extract } from '../mobx-wxapp'\nimport { observable } from '../mobx'\n\nconst appStore = observable({\n  title: 'mobx-wxapp'\n})\n\nconst store = observable({\n\n  // observable\n  seconds: 0,\n\n  // computed\n  get color() {\n    return this.seconds % 2 ? 'red' : 'green'\n  },\n\n  // actions\n  tick() {\n    this.seconds += 1\n  }\n})\n\n// page\nPage({\n  onLoad() {\n    connect(this, () =\u003e ({\n        title: appStore.title,\n        color: store.color,\n        seconds: store.seconds\n        // 或者使用 extract 一次性提取全部属性\n        // ...extract(store)\n      })\n    )\n  },\n  add() {\n    store.tick()\n  }\n})\n\n```\npages/index.wxml:\n\n```xml\n\u003cview\u003e{{ title }} :\u003c/view\u003e\n\u003cview style=\"color:{{ color }}\"\u003e seconds:{{ seconds }} \u003c/view\u003e\n\u003cbutton bindtap=\"add\"\u003eadd\u003c/button\u003e\n```\n\n当然，您也可在 Component 中使用:\n\n```JavaScript\nComponent({\n  //..\n  ready(){\n    this.disposer = connect(this,mapDataToStore,options)\n  },\n\n  //请务必在组件生命周期结束前执行销毁器!\n  detached(){\n    this.disposer();\n  }\n  //...\n})\n```\n\n## API\n\n### connect(context,mapDataToStore,options?)\n+ context:Object // 请传入this\n+ mapDataToStore:Function //需要绑定到视图的映射函数\n+ options:Object // 可选参数\n\n```\noptions = {\n  delay:Number,// setData的最小执行间隔,默认30ms\n  setDataCallback:Function // setData的执行回调\n}\n```\n返回值:`connect`返回一个销毁器函数（在 Page 中使用时将自动在 onUnload 生命周期执行,但在 Component 构造器中使用时请确保在生命周期结束时手动调用此函数）。\n\n### extract(store)\n映射整个store的快捷方式\n+ store:Object // 一个被观察的store对象\n\n返回值:一个可被映射到data的对象\n\n## 应用\n\u003cimg src=\"http://misc.fapiaoer.cn/wxapp-yunpiaoer2b/yp2bqrcode.jpeg\" width = '100' height = '100' /\u003e\u003cimg src=\"http://misc.fapiaoer.cn/rongpiaoer/rpqrcode.jpeg\" width = '100' height = '100' /\u003e\n\n## License\n\nISC licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbqdly%2Fmobx-wxapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbqdly%2Fmobx-wxapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbqdly%2Fmobx-wxapp/lists"}