# mobx-wxapp

> 在小程序中使用mobx

Latest version **2.2.1** (published 2019-05-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install mobx-wxapp
pnpm add mobx-wxapp
yarn add mobx-wxapp
bun add mobx-wxapp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2019-05-27 |
| First published | 2018-07-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 173.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 56 |
| Author | b5156 |
| Maintainers | b5156 |
| Keywords | mobx, wechat, weapp, wxapp, miniprogram, computed |

## Links

- npm: https://www.npmjs.com/package/mobx-wxapp
- Repository: https://github.com/b5156/mobx-wxapp
- Homepage: https://github.com/b5156/mobx-wxapp#readme
- Issues: https://github.com/b5156/mobx-wxapp/issues
- npm.io page: https://npm.io/package/mobx-wxapp

## Recent versions

- 2.2.1 (latest) — 2019-05-27
- 2.2.0 — 2019-02-27
- 2.1.0 — 2019-02-01
- 2.0.0 — 2018-12-14
- 1.6.0 — 2018-12-12
- 1.5.0 — 2018-12-02
- 1.4.3 — 2018-11-22
- 1.4.2 — 2018-09-19
- 1.4.1 — 2018-09-15
- 1.4.0 — 2018-09-07
- 1.3.0 — 2018-08-27
- 1.2.0 — 2018-08-26
- 1.1.0 — 2018-08-24
- 1.0.0 — 2018-08-23
- 0.3.0 — 2018-08-23
- … 4 more at https://npm.io/package/mobx-wxapp/versions

## README

# mobx-wxapp

在小程序中使用[mobx](https://github.com/mobxjs/mobx)，`connect`函数可将被观察的数据高效的绑定到小程序视图。
旧的`inject`方式见[v1](https://github.com/b5156/mobx-wxapp/tree/v1)

### 安装

`npm install mobx-wxapp` 安装项目到本地 或 直接拷贝文件(example/mobx-wxapp.js)到您的项目。

(案例使用了 mobx.js v4.6.0 ,因 mobx5 使用了小程序暂不支持的 ES6 proxy)

### 用法

pages/index.js:

```JavaScript
import { connect, extract } from '../mobx-wxapp'
import { observable } from '../mobx'

const appStore = observable({
  title: 'mobx-wxapp'
})

const store = observable({

  // observable
  seconds: 0,

  // computed
  get color() {
    return this.seconds % 2 ? 'red' : 'green'
  },

  // actions
  tick() {
    this.seconds += 1
  }
})

// page
Page({
  onLoad() {
    connect(this, () => ({
        title: appStore.title,
        color: store.color,
        seconds: store.seconds
        // 或者使用 extract 一次性提取全部属性
        // ...extract(store)
      })
    )
  },
  add() {
    store.tick()
  }
})

```
pages/index.wxml:

```xml
<view>{{ title }} :</view>
<view style="color:{{ color }}"> seconds:{{ seconds }} </view>
<button bindtap="add">add</button>
```

当然，您也可在 Component 中使用:

```JavaScript
Component({
  //..
  ready(){
    this.disposer = connect(this,mapDataToStore,options)
  },

  //请务必在组件生命周期结束前执行销毁器!
  detached(){
    this.disposer();
  }
  //...
})
```

## API

### connect(context,mapDataToStore,options?)
+ context:Object // 请传入this
+ mapDataToStore:Function //需要绑定到视图的映射函数
+ options:Object // 可选参数

```
options = {
  delay:Number,// setData的最小执行间隔,默认30ms
  setDataCallback:Function // setData的执行回调
}
```
返回值:`connect`返回一个销毁器函数（在 Page 中使用时将自动在 onUnload 生命周期执行,但在 Component 构造器中使用时请确保在生命周期结束时手动调用此函数）。

### extract(store)
映射整个store的快捷方式
+ store:Object // 一个被观察的store对象

返回值:一个可被映射到data的对象

## 应用
<img src="http://misc.fapiaoer.cn/wxapp-yunpiaoer2b/yp2bqrcode.jpeg" width = '100' height = '100' /><img src="http://misc.fapiaoer.cn/rongpiaoer/rpqrcode.jpeg" width = '100' height = '100' />

## License

ISC licensed.

---
_Source: https://npm.io/package/mobx-wxapp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._