0.0.2 • Published 5 years ago
weapp-mobx v0.0.2
微信小程序 mobx 绑定 依赖 mobx 版本: 4.9.2
安装
npm 包
npm install weapp-mobx -save
使用( 使用 ES5 语法 )
创建 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, }
绑定页面联动事件
// npm 包安装引入的路径 var observer = require('wechat-weapp-mobx/observer').observer; // 关键, 监控页面事件, 让 mobx 有机会更新页面数据 Page(observer({ props: { todoStore: require('../stores/todoStore').default, }, // your other code below onLoad(){ } }))
说明
完成上述两步之后,你就可以在 wxml 中用
props.todoStore
这种方式来访问了, 并且数据联动已经自动工作.// <小程序根目录>/pages/index/index.wxml <view>{{props.todoStore.todoText}}</view>
数据自动联动
stores 中的数据可以跨页面同时访问,并且数据更新后,页面也会自动更新。从而节省大量逻辑代码。
版本更新记录
- 新增组件 component observer