1, install,

npm install --save mobx-miniprogram mobx-miniprogram-bindings
Copy the code

2. Create a MobX Store

// store.js
import { configure, observable, action } from 'mobx-miniprogram'

// State modification outside the action is not allowed
configure({ enforceActions: 'observed' });

export const store = observable({

  // Data field
  numA: 1.numB: 2.// Calculate attributes
  get sum() {
    return this.numA + this.numB
  },

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

})
Copy the code

3. Use (Behavior binding) in Component

//store.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '.. /.. /store/store'

Component({
  options: {
    styleIsolation: 'shared'
  },
  behaviors: [storeBindingsBehavior],
  data: {},storeBindings: {
    store,
    fields: {
      numA: () = > store.numA,
      numB: (store) = > store.numB,
      sum: 'sum'
    },
    actions: {
      buttonTap: 'update'}}})Copy the code
//store.wxml< view > Component: < / view ><view class="intro">{{numA}} + {{numB}} = {{sum}}</view>
<view class="intro">
  <button bind:tap="buttonTap">update</button>
</view>
Copy the code

Parameter Description:

  • fields
  • Fields come in three forms:
  • Array form: Specifies which fields in data come from store. For example [‘numA’, ‘numB’, ‘sum’].
  • Mapping form: Specify which fields in data are derived from store and their corresponding names in store. For example, {a: ‘numA’, b: ‘numB’}, where this.data.a === store.numA this.data.b === store.numb.
  • Functional form: Specifies how each field in data is evaluated. For example {a: () => store.numa, b: NumA this.data.b === anotherStore.numb}; numA this.data.b === numB.
  • Of the three forms, the mapping and function forms can be used together in one configuration.
  • The store field can be empty if only the functional form is used, otherwise the store field is mandatory.
  • actions
  • Actions can be used to place some actions in the store under this of a page or custom component to trigger some actions. There are two forms:
  • Array format: for example [‘update’], this.update === store.update.
  • Mapping form: for example {buttonTap: ‘update’}, this.buttonTap === store.update.
  • As long as actions are not empty, the Store field is mandatory.

4. Use in Page (manual binding)

//store.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '.. /.. /store/store'

Page({
  data: {},onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA'.'numB'.'sum'].actions: ['update']})},onUnload() {
    this.storeBindings.destroyStoreBindings()
  }
})
Copy the code
//store.wxmlThe < view > Page: < / view ><view class="intro">{{numA}} + {{numB}} = {{sum}}</view>
<view class="intro">
  <button bind:tap="update">update</button>
</view>

// Insert in component
<component />
Copy the code
//store.json
"usingComponents": {
    "component": "/components/storeCom/store"
 }
Copy the code

5, add

Store binding is available in two ways: Behavior binding and manual binding.

The Behavior binding applies to the Component constructor. Practice: Use the storeBindingsBehavior behavior and storeBindings definition section.

Note: You can construct pages using the Component constructor

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    /* Bind configuration (see below) */}})Copy the code

Manual binding applies to all scenarios. How to do it: Create bindings using createStoreBindings, which returns an object containing a cleanup function to unbind.

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

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

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      /* Bind configuration (see below) */})},onUnload() {
    this.storeBindings.destroyStoreBindings()
  }
})
Copy the code

6. Delayed updates vs. immediate updates

To improve performance, when a field is updated in the Store, it is not immediately synchronized to this.data, but is not updated until the next wx.nexttick call. (This can significantly reduce the number of setData calls.)

To update immediately, call:

this.updateStoreBindings() // (in behavior binding)
this.storeBindings.updateStoreBindings() // (in manual binding)
Copy the code

7, effects,