mobx wxapp

mobx-wxapp

在小程式中使用mobx， connect函數可將被觀察的資料高效的綁定到小程式視圖。 舊的inject方式見v1

安裝

npm install mobx-wxapp安裝專案到本地或直接拷貝檔案(example/mobx-wxapp.js)到您的專案。

(案例使用了mobx.js v4.6.0 ,因mobx5 使用了小程式暫不支援的ES6 proxy)

用法

pages/index.js:

 import { connect , extract } from '../mobx-wxapp'
import { observable } from '../mobx'

const appStore = observable ( {
  title : 'mobx-wxapp'
} )

const store = observable ( {

  // observable
  seconds : 0 ,

  // computed
  get color ( ) {
    return this . seconds % 2 ? 'red' : 'green'
  } ,

  // actions
  tick ( ) {
    this . seconds += 1
  }
} )

// page
Page ( {
  onLoad ( ) {
    connect ( this , ( ) => ( {
        title : appStore . title ,
        color : store . color ,
        seconds : store . seconds
        // 或者使用 extract 一次性提取全部属性
        // ...extract(store)
      } )
    )
  } ,
  add ( ) {
    store . tick ( )
  }
} )

pages/index.wxml:

< view >{{ title }} :</ view >
< view style = " color:{{ color }} " > seconds:{{ seconds }} </ view >
< button bindtap = " add " >add</ button >

當然，您也可以在Component 中使用:

 Component ( {
  //..
  ready ( ) {
    this . disposer = connect ( this , mapDataToStore , options )
  } ,

  //请务必在组件生命周期结束前执行销毁器!
  detached ( ) {
    this . disposer ( ) ;
  }
  //...
} ) 

API

connect(context,mapDataToStore,options?)

• context:Object // 請傳入this
• mapDataToStore:Function //需要綁定到視圖的映射函數
• options:Object // 選用參數

 options = {
  delay:Number,// setData的最小执行间隔,默认30ms
  setDataCallback:Function // setData的执行回调
}

傳回值: connect傳回銷毀器函數（在Page 中使用時將自動在onUnload 生命週期執行,但在Component 建構器中使用時請確保在生命週期結束時手動呼叫此函數）。

extract(store)

映射整個store的快捷方式

• store:Object // 一個被觀察到的store對象

傳回值:一個可被映射到data的對象

應用

License

ISC licensed.