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

安装

npm 包

npm install weapp-mobx -save

使用( 使用 ES5 语法 )

1. 创建 mobx 的 stores

   // <小程序根目录>/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. 绑定页面联动事件

   // 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 这种方式来访问了, 并且数据联动已经自动工作.

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

4. 数据自动联动

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

版本更新记录

• 新增组件 component observer