【微信小程序】小程序的 MobX 绑定辅助库

小程序的 MobX 绑定辅助库

小程序的 MobX 绑定辅助库。

此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
可配合 MobX 的小程序构建版 npm 模块 mobx-miniprogram 使用。

使用方法

需要小程序基础库版本 >= 2.2.3 的环境。
也可以直接参考这个代码片段（在微信开发者工具中打开）： https://developers.weixin.qq.com/s/36j8NZmC74ac

1. 安装 mobx-miniprogram 和 mobx-miniprogram-bindings ：

npm install --save mobx-miniprogram mobx-miniprogram-bindings

2.创建 MobX Store。

// store.js
import { observable, action } from 'mobx-miniprogram'
export const store = observable({// 数据字段numA: 1,numB: 2,// 计算属性get sum() {return this.numA + this.numB},// actionsupdate: action(function () {const sum = this.sumthis.numA = this.numBthis.numB = sum})
})

3.在 Component 构造器中使用：

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from './store'
Component({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 的字段}}
})

4.在 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 的字段}
})

接口

将页面、自定义组件和 store 绑定有两种方式： behavior 绑定 和 手工绑定 。
behavior 绑定
behavior 绑定适用于 Component 构造器。做法：使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。

注意：你可以用 Component 构造器构造页面，参考文档。

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
Component({behaviors: [storeBindingsBehavior],storeBindings: {/* 绑定配置（见下文） */}
})

手工绑定
手工绑定 适用于全部场景。做法：使用 createStoreBindings 创建绑定，它会返回一个包含清理函数的对象用于取消绑定。

注意：在页面 onUnload （自定义组件 detached ）时一定要调用清理函数，否则将导致内存泄漏！

import { createStoreBindings } from 'mobx-miniprogram-bindings'
Page({onLoad() {this.storeBindings = createStoreBindings(this, {/* 绑定配置（见下文） */})},onUnload() {this.storeBindings.destroyStoreBindings()}
})