點擊前往小程序MobX的官方文檔

注：此 behavior 依賴開發者工具的 npm 構建。 什麼是npm構建？

安裝 mobx-miniprogram 和 mobx-miniprogram--bindings

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

點擊微信開發者工具左上角：工具 --- npm 構建

構建完成後，兩個文件夾下 mobx-xxxxx 的4個包都已經就緒

創建 MobX Store：新建store.js，並實例化 observable

observable 是默認的 MobX store

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

// 創建store並暴露出去
// observable：默認的 MobX store
export const store = observable({

  // 數據data
  numA: 1,
  numB: 2,

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

  // 通過 action 聲明
  update: action(function () {
    const sum = this.sum
    this.numA = this.numB
    this.numB = sum
  })
})

store創建好了，接下來就是怎麼綁定的問題了

綁定配置

無論使用哪種綁定方式，都必須提供一個綁定配置對象，參數如下：

• store：默認的 MobX store
• fields：用於指定需要綁定的 data 字段。數組或者對象（數組、映射、函數）
• actions: 用於指定需要映射的 actions。數組或者對象（數組、映射）

廢話不多説，直接看例子

手工綁定：通過 createStoreBindings （適用於全部場景）

注意： 在頁面 onUnload （自定義組件 detached ）時一定要調用清理函數 destroyStoreBindings，否則將導致內存泄漏！

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

Page({
  data: {
  },
  onLoad() {
      // 傳入指針 this 實例化
    this.storeBindings = createStoreBindings(this, {
      store,
      // 數組形式需要與data同名
      fields: ['numA', 'numB', 'sum'], 
      actions: ['update'], 
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings()
  },
  // 可以在method的合適時機，去調用update
  myMethod() {
    this.update()
  }
})

store中的 numA numB sum 和 update 在 page.js 和對應的 page.wxml 中 即可正常使用

behavior綁定：通過storeBindingsBehavior（適用於 Component 構造器）

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

Component({
  // 固定寫法
  behaviors: [storeBindingsBehavior],
  data: {
    someData: '...'
  },
  
  storeBindings: {
    store,
    // 函數形式，可另外聲明變量
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: 'sum'
    },
    // 映射形式，可另外聲明變量
    actions: {
      buttonTap: 'update'
    },
  },
  methods: {
    add() {
      // buttonTap 即 update
      this.buttonTap()
    }
  }
})

fields、actions如果使用數組，需要與store中同名；如果使用對象，可單獨聲明變量

延遲更新與立刻更新

為了提升性能，在 store 中的字段被更新後，並不會立刻同步更新到 this.data 上，而是等到下個 wx.nextTick 調用時才更新。（這樣可以顯著減少 setData 的調用次數。）
如果需要立刻更新，可以調用：

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