mobx wxapp

mobx-wxapp

Saat menggunakan mobx dalam program mini, fungsi connect dapat secara efisien mengikat data yang diamati ke tampilan program mini. Lihat v1 untuk metode inject lama

Memasang

npm install mobx-wxapp menginstal proyek secara lokal atau langsung menyalin file (example/mobx-wxapp.js) ke proyek Anda.

(Kasusnya menggunakan mobx.js v4.6.0, karena mobx5 menggunakan proxy ES6, yang saat ini tidak didukung oleh mini program)

penggunaan

halaman/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 ( )
  }
} )

halaman/index.wxml:

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

Tentu saja, Anda juga dapat menggunakannya di Komponen:

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

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

API

terhubung (konteks, mapDataToStore, opsi?)

• konteks:Objek // Tolong sampaikan ini
• mapDataToStore:Function //Fungsi pemetaan yang perlu diikat ke tampilan
• pilihan:Objek // Parameter opsional

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

Nilai yang dikembalikan: connect mengembalikan fungsi perusak (bila digunakan di Page, fungsi ini akan dieksekusi secara otomatis dalam siklus hidup onUnload, namun bila digunakan dalam konstruktor Komponen, pastikan untuk memanggil fungsi ini secara manual di akhir siklus hidup).

ekstrak (simpan)

Pintasan untuk memetakan seluruh toko

• store:Object // Objek penyimpanan yang diamati

Nilai kembalian: objek yang dapat dipetakan ke data

aplikasi

Lisensi

berlisensi ISC.