MobX binding secondary libraries for small programs

MobX binding secondary libraries for small programs.

This behavior relies on the npm build of the developer tool. Details can be found in the official npm documentation.

Available with MobX's small program build npm module mobx-miniprogram.

How to use it

An environment that requires a small program base library version of 2.2.3.

You can also refer directly to this snippet (opened in the WeChat developer tool): https://developers.weixin.qq.com/s/36j8NZmC74ac.

1. Install mobx-miniprogram and mobx-miniprogram-bindings:

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

1. Create a 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
  },

  // actions
  update: action(function () {
    const sum = this.sum
    this.numA = this.numB
    this.numB = sum
  })

})

1. Use in the Component constructor:

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

1. Use in the Page constructor:

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

Interface

There are two ways to bind pages, custom components, and store: behavior binding and manual binding.

Behavior binding

Behavior bindings apply to Component constructors. Practice: Use storeBindingsBehavior to define segments for this behavior and storeBindings.

Note: You can construct a page with the Component constructor, refer to the documentation.

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

Manual binding

Manual binding applies to all scenes. Practice: Create a binding using createStoreBindings, which returns an object that contains a cleanup function for unbinding.

Note: Be sure to call the cleanup function when the page onUnload (custom component detached) or it will cause a memory leak!

import { createStoreBindings } from 'mobx-miniprogram-bindings'

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      /* 绑定配置（见下文） */
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings()
  }
})

The binding configuration

Regardless of the binding method used, you must provide a binding configuration object. This object contains the following fields:

fields

Fields can take three forms:

• Array form: Specify which fields in data come from the store. For example, 'numA', 'numB', 'sum'.
• Mapping form: Specify which fields in data come from the store and their names in the store. For example: 'numA', b: 'numB', at this time this.data.a is store.numA this.data.b is store.num.numB.
• Function form: Specifies how each field in data is calculated. For example, this.data.a is store.numA this.data.a is store.numA this.data.b is the same Store.numB.

In all three forms, the mapping form and the function form can be used in a configuration at the same time.

If only the function form is used, the store field can be empty, otherwise the store field is required.

actions

Actions can be used to place some actions in the store under this of a page or custom component to facilitate the triggering of some actions. There are two forms:

• Array form: for example, 'update', at which point this.update is store.update.
• Mapping form: for example, s buttonTap: 'update', at which point this.buttonTap is store.update.

Store fields are required as long as actions are not empty.

Delay updates with immediate updates

To improve performance, fields in the store are not updated to this.data immediately after they are updated, but wait until the next wx.nextTick call. ( This significantly reduces the number of calls to setData.) ）

If you need to update immediately, you can call:

• this.updateStoreBindings() (in behavior binding)
• this.storeBindings.updateStoreBindings() (in Manual Binding)