• 默认情况下,mobx 项目的所有的 page 都会自动监听全局 store 的变化,可以设置 observe 来禁用:
    1. import {MobxPage} from '@minapp/mobx'
    2. // 在 page 中禁用
    3. @pagify({observe: false})
    4. export MyPage extends MobxPage {
    5. }
    • 默认情况下,如果启用了 observe,会将所有的 store 中的属性注入到 data 中,可能会和你自己定义的数据冲突,或者你只想监听 store 中的某个字段,你可以这样做:
    1. @pagify({mapStoreToData: (store) => {
    2. return {
    3. newKey: store.oldKey
    4. }
    5. }})
    6. export MyPage extends MobxPage {
    7. }
    • 不用担心使用了全局对象会造成 page 的频繁更新,当你使用 setDataSmart 时,当页面处于 hide状态时,并不会真正更新隐藏的页面数据,而等到页面 show 后,会统一更新页面数据。

    如果不想要此功能,可以设置 lazySetData 为 false 来禁用此功能

    1. @pagify({lazySetData: false})
    2. export MyPage extends MobxPage {
    3. }
    • 使用 mixin 扩展组件功能

    编码准则 中所述,框架中的 App,Page,Component 的子类并不是完整的 class,有一些 class的功能你不能使用,但你可以使用下面的 mixin 来实现你需要的功能

    1. const mixins = [
    2. {
    3. onLoad() {
    4. console.log('in mixin')
    5. }
    6. }
    7. ]
    8. @pagify({mixins})
    9. export MyPage extends MobxPage {
    10. onLoad() {
    11. console.log('in page')
    12. }
    13. }

    上面两个 onLoad 都会执行,注意:mixins 必须保证函数的执行顺序是无关的