@smt-lib/mobx v1.0.1

title: smt-mobx header: develop nav: extensions

sidebar: smt-mobx

npm引入smt-mobx

解释： 在小程序开发中，总会遇到多页面需要使用同一数据的情况，从而产生了希望引入mobx、redux等数据状态管理框架的诉求。smt-mobx是小程序使用mobx的连接器，帮助开发者在小程序开发中使用mobx。mobx使用的是4.13.1版本。mobx官网

小程序种使用三方npm包方法，见npm使用说明

    npm install @smt-lib/mobx

方法：createStoreManager

在onLoad或者attached时创建storeManager

createStoreManager参数说明：

第二个参数说明：

返回值

各部分代码示例

store示例

import { observable, action } from "mobx";
export const store = observable({
  // 数据字段
  a: 1,
  b: 2,
  addA: action(function () {
    this.a++;
  }),
  addB: action(function () {
    this.b++;
  })
});

页面示例

import {createStoreManager} from '@smt-lib/mobx';
import {store} from './store';

Page({
    data: {
        // 默认数据
    },

    onLoad () {
        // 将actions上的方法，绑到this.storeManager上
        // 将fields上的数据，链接到this.data上
        this.storeManager = createStoreManager(this, {
            store,
            fields: ['a', 'b'],
            actions: ['addA', 'addB']
        });
    },

    onUnload() {
        // 在onUnload时需要清空绑定的storeManager
        this.storeManager.destoryAll();
    }

});

自定义组件示例

import {createStoreManager} from '@smt-lib/mobx';
import {store} from './store';

Component({
    properties: {
        // 默认数据
    },
    lifetimes: {
        attached() {
            // 将actions上的方法，绑到this上
            // 将fields上的数据，绑到this.data上
            this.storeManager = createStoreManager(this, {
                store,
                fields: {
                    aa: 'a', 
                    bb: 'b'
                },
                actions: {
                    myAddA: 'addA',
                    myAddB: () => store.addB
                }
            });
        },
        detached() {
            // 在detached时需要清空绑定的storeManager
            this.storeManager.destoryAll();
        }
    },
    methods: {
        updateNum() {
            this.data.aa   // 获取store中的a
            this.storeManager.myAddA();  // 调用action中的addA方法
            this.storeManager.updateImmediately();
        }
    }
});