mobx wxapp

mobx-wxapp

미니 프로그램에서 mobx를 사용할 때 connect 기능을 사용하면 관찰된 데이터를 미니 프로그램 보기에 효율적으로 바인딩할 수 있습니다. 이전 inject 방법은 v1을 참조하세요.

설치하다

npm install mobx-wxapp 프로젝트를 로컬로 설치하거나 파일(example/mobx-wxapp.js)을 프로젝트에 직접 복사합니다.

(mobx5는 현재 미니 프로그램에서 지원하지 않는 ES6 프록시를 사용하기 때문에 이 사례에서는 mobx.js v4.6.0을 사용합니다.)

용법

페이지/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 ( )
  }
} )

페이지/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

연결(컨텍스트,mapDataToStore,옵션?)

• context:Object // 이것을 전달해주세요
• mapDataToStore:Function //뷰에 바인딩되어야 하는 매핑 함수
• options:Object // 선택적 매개변수

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

반환 값: connect 소멸자 함수를 반환합니다(Page에서 사용하는 경우 onUnload 라이프 사이클에서 자동으로 실행되지만, Component 생성자에서 사용되는 경우 라이프 사이클이 끝날 때 이 함수를 수동으로 호출해야 합니다).

추출(저장)

매장 전체 지도 바로가기

• store:Object // 관찰된 저장소 객체

반환값 : 데이터에 매핑될 수 있는 객체

애플리케이션

특허

ISC 라이센스를 받았습니다.