微信小程序 框架擴(kuò)展·MobX綁定輔助庫(kù)

小程序的 MobX 綁定輔助庫(kù)

小程序的 MobX 綁定輔助庫(kù)。

此 behavior 依賴開(kāi)發(fā)者工具的 npm 構(gòu)建。具體詳情可查閱 官方 npm 文檔 。

可配合 MobX 的小程序構(gòu)建版 npm 模塊 mobx-miniprogram 使用。

使用方法

需要小程序基礎(chǔ)庫(kù)版本 >= 2.2.3 的環(huán)境。

也可以直接參考這個(gè)代碼片段（在微信開(kāi)發(fā)者工具中打開(kāi)）： https://developers.weixin.qq.com/s/36j8NZmC74ac 。

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

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

1. 創(chuàng)建 MobX Store。

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

export const store = observable({

  // 數(shù)據(jù)字段
  numA: 1,
  numB: 2,

  // 計(jì)算屬性
  get sum() {
    return this.numA + this.numB
  },

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

})

1. 在 Component 構(gòu)造器中使用：

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 // 來(lái)自于 MobX store 的字段
    }
  }
})

1. 在 Page 構(gòu)造器中使用：

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 // 來(lái)自于 MobX store 的字段
  }
})

接口

將頁(yè)面、自定義組件和 store 綁定有兩種方式： behavior 綁定 和 手工綁定 。

behavior 綁定

behavior 綁定 適用于 Component 構(gòu)造器。做法：使用 storeBindingsBehavior 這個(gè) behavior 和 storeBindings 定義段。

注意：你可以用 Component 構(gòu)造器構(gòu)造頁(yè)面， 參考文檔 。

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

手工綁定

手工綁定 適用于全部場(chǎng)景。做法：使用 createStoreBindings 創(chuàng)建綁定，它會(huì)返回一個(gè)包含清理函數(shù)的對(duì)象用于取消綁定。

注意：在頁(yè)面 onUnload （自定義組件 detached ）時(shí)一定要調(diào)用清理函數(shù)，否則將導(dǎo)致內(nèi)存泄漏！

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

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      /* 綁定配置（見(jiàn)下文） */
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings()
  }
})

綁定配置

無(wú)論使用哪種綁定方式，都必須提供一個(gè)綁定配置對(duì)象。這個(gè)對(duì)象包含的字段如下：

fields

fields 有三種形式：

• 數(shù)組形式：指定 data 中哪些字段來(lái)源于 store 。例如 ['numA', 'numB', 'sum'] 。
• 映射形式：指定 data 中哪些字段來(lái)源于 store 以及它們?cè)?nbsp;store 中對(duì)應(yīng)的名字。例如 { a: 'numA', b: 'numB' } ，此時(shí) this.data.a === store.numA this.data.b === store.numB 。
• 函數(shù)形式：指定 data 中每個(gè)字段的計(jì)算方法。例如 { a: () => store.numA, b: () => anotherStore.numB } ，此時(shí) this.data.a === store.numA this.data.b === anotherStore.numB 。

上述三種形式中，映射形式和函數(shù)形式可以在一個(gè)配置中同時(shí)使用。

如果僅使用了函數(shù)形式，那么 store 字段可以為空，否則 store 字段必填。

actions

actions 可以用于將 store 中的一些 actions 放入頁(yè)面或自定義組件的 this 下，來(lái)方便觸發(fā)一些 actions 。有兩種形式：

• 數(shù)組形式：例如 ['update'] ，此時(shí) this.update === store.update 。
• 映射形式：例如 { buttonTap: 'update' } ，此時(shí) this.buttonTap === store.update 。

只要 actions 不為空，則 store 字段必填。

延遲更新與立刻更新

為了提升性能，在 store 中的字段被更新后，并不會(huì)立刻同步更新到 this.data 上，而是等到下個(gè) wx.nextTick 調(diào)用時(shí)才更新。（這樣可以顯著減少 setData 的調(diào)用次數(shù)。）

如果需要立刻更新，可以調(diào)用：

• this.updateStoreBindings() （在 behavior 綁定 中）
• this.storeBindings.updateStoreBindings() （在 手工綁定 中）