mobx wxapp

mobx-wxapp

Cuando se usa mobx en un mini programa, la función connect puede vincular de manera eficiente los datos observados a la vista del mini programa. Consulte v1 para conocer el antiguo método inject .

Instalar

npm install mobx-wxapp instala el proyecto localmente o copia directamente el archivo (ejemplo/mobx-wxapp.js) a su proyecto.

(El caso usa mobx.js v4.6.0, porque mobx5 usa proxy ES6, que actualmente no es compatible con el mini programa)

uso

páginas/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 ( )
  }
} )

páginas/index.wxml:

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

Por supuesto, también puedes usarlo en Componente:

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

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

API

conectar(contexto,mapDataToStore,opciones?)

• contexto:Objeto // Por favor pasa esto
• mapDataToStore:Function //La función de mapeo que debe vincularse a la vista
• opciones:Objeto // Parámetros opcionales

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

Valor de retorno: connect devuelve una función destructora (cuando se usa en la página, se ejecutará automáticamente en el ciclo de vida de onUnload, pero cuando se usa en el constructor del componente, asegúrese de llamar esta función manualmente al final del ciclo de vida).

extraer (almacenar)

Acceso directo para mapear toda la tienda

• store:Object // Un objeto de tienda observado

Valor de retorno: un objeto que se puede asignar a datos

solicitud

Licencia

Licencia ISC.