mobx wxapp

mobx-wxapp

Lors de l'utilisation de mobx dans un mini-programme, la fonction connect peut lier efficacement les données observées à la vue du mini-programme. Voir v1 pour l'ancienne méthode inject

Installer

npm install mobx-wxapp installe le projet localement ou copie directement le fichier (exemple/mobx-wxapp.js) dans votre projet.

(Le cas utilise mobx.js v4.6.0, car mobx5 utilise le proxy ES6, qui n'est actuellement pas pris en charge par le mini-programme)

usage

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 >

Bien sûr, vous pouvez également l'utiliser dans Component :

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

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

API

connecter (contexte, mapDataToStore, options ?)

• context:Object // Veuillez transmettre ceci
• mapDataToStore:Function //La fonction de mappage qui doit être liée à la vue
• options:Objet // Paramètres facultatifs

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

Valeur de retour : connect renvoie une fonction destructeur (lorsqu'elle est utilisée dans Page, elle sera automatiquement exécutée dans le cycle de vie onUnload, mais lorsqu'elle est utilisée dans le constructeur de composant, assurez-vous d'appeler cette fonction manuellement à la fin du cycle de vie).

extraire (magasin)

Raccourci pour cartographier l'ensemble du magasin

• store:Object // Un objet de magasin observé

Valeur de retour : un objet qui peut être mappé à des données

application

Licence

Licence ISC.