安装
npm install --save mobx-miniprogram mobx-miniprogram-bindings
定义 store.js
/** * 全局状态管理 */import { observable, action } from 'mobx-miniprogram';export const store = observable({ // 数据字段 numA: 1, numB: 2, // 计算属性 get sum() { return this.numA * this.numB; }, // actions update: action(function () { this.numA++; }),});
在 Component 构造器中使用
import{ storeBindingsBehavior }from'mobx-miniprogram-bindings'import{ store }from'./store'Component({ // behavior 绑定 behaviors:[storeBindingsBehavior], data:{ someData:'...' }, storeBindings:{ store, fields:{ numA:()=> store.numA, numB:(store)=> store.numB, sum:'sum' }, actions:{ buttonTap:'update' }, }, methods:{ myMethod(){ this.data.sum // 来自于 MobX store 的字段 } }})
在 Page 构造器中使用:
import{ createStoreBindings }from'mobx-miniprogram-bindings'import{ store }from'./store'Page({ data:{ someData:'...' }, onLoad(){ // 手工绑定 this.storeBindings = createStoreBindings(this,{ store, fields:['numA','numB','sum'], actions:['update'], }) }, // 一定要调用清理函数,否则将导致内存泄漏! onUnload(){ this.storeBindings.destroyStoreBindings() }, myMethod(){ this.data.sum // 来自于 MobX store 的字段 }})
在 app.js 中使用
import { store } from './store';App({ onShow(options) { // 更新 store.update(); },})