# weapp-mobx

> 微信小程序 mobx 绑定( wechat weapp mobx )

Latest version **0.0.2** (published 2019-06-25) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-06-25 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 188.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beidan |
| Maintainers | beidan |

## Links

- npm: https://www.npmjs.com/package/weapp-mobx
- npm.io page: https://npm.io/package/weapp-mobx

## Recent versions

- 0.0.2 (latest) — 2019-06-25
- 0.0.1 — 2019-06-14

## README

微信小程序 mobx 绑定
依赖 mobx 版本: 4.9.2

## 安装
### npm 包
```shell
npm install weapp-mobx -save
```

## 使用( 使用 ES5 语法 )
1. 创建 mobx 的 stores

    ```js
    // <小程序根目录>/stores/todoStore.js
    var extendObservable = require('wechat-weapp-mobx/mobx').extendObservable;
    var TodoStore = function() {
      extendObservable(this, {
        todos: [],
        todoText: 'aaa',
        get count() {
          return this.todos.length;
        }
      });
      // action
      this.addTodo = function(title) {
        this.todos.push( {title: title} );
      }

      this.removeTodo = function() {
        this.todos.pop();
      }
    }

    module.exports = {
      default: new TodoStore,
    }
    ```

2. 绑定页面联动事件
    ```js
    // npm 包安装引入的路径
    var observer = require('wechat-weapp-mobx/observer').observer;
    // 关键, 监控页面事件, 让 mobx 有机会更新页面数据
    Page(observer({
      props: {
        todoStore: require('../stores/todoStore').default,
      },
      // your other code below
      onLoad(){
      }
    }))
    ```

3. 说明

    完成上述两步之后,你就可以在 wxml 中用 `props.todoStore` 这种方式来访问了, 并且数据联动已经自动工作.

    ```js
    // <小程序根目录>/pages/index/index.wxml
    <view>{{props.todoStore.todoText}}</view>
    ```

4. 数据自动联动

stores 中的数据可以跨页面同时访问，并且数据更新后，页面也会自动更新。从而节省大量逻辑代码。


## 版本更新记录
* 新增组件 component observer

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