小程序的 MobX 綁定輔助庫

小程序的 MobX 綁定輔助庫。

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

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

使用方法

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

也可以直接參考這個代碼片段（在微信開發(fā)者工具中打開）： 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,

  // 計算屬性
  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 // 來自于 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 // 來自于 MobX store 的字段
  }
})

接口

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

behavior 綁定

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

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

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

手工綁定

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

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

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

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

綁定配置

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

字段名	類型	含義
store	一個 MobX observable	默認的 MobX store
fields	數(shù)組或者對象	用于指定需要綁定的 data 字段
actions	數(shù)組或者對象	用于指定需要映射的 actions

fields

fields 有三種形式：

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

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

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

actions

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

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

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

延遲更新與立刻更新

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

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

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

分享名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序框架擴展·MobX綁定輔助庫
網(wǎng)站鏈接：http://uogjgqi.cn/article/cdphpec.html