@smt-lib/mobx

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参数说明：

参数	类型	必填	默认值	说明
target	Object	是		当前上下文
store	Object	是		store相关信息
throttle	Function	否	swan.nextTick	可throttle的函数

第二个参数说明：

属性名	类型	必填	默认值	说明
store	Object	是		当前上下文
fields	Object/Array	是		需要同步到小程序data上的数据。当类型为Object时，可以自定义挂载到data上的属性名
actions	Object/Array	否		修改store状态的动作，当类型为Object时，可以自定义挂载到storeManager上的方法名

返回值

|名称 |类型 |说明| |---- | ---- | ---- | ----|----| |destoryAll |Function | 清空所有storeManager | |updateImmediately |Function |及时同步store的状态更新到小程序data上| |actions中的方法|Function|actions中的所有方法，都会挂到storeManager|

各部分代码示例

** 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();
        }
    }
});