写在前面

状态管理可以说是现代前端开发中最核心的一环。为了解决前端应用的复杂度，生态圈里诞生了各式各样的状态管理方案，按编程范式分类有函数式（redux），响应式（rxjs），透明的函数响应式（mobx），按状态存储分类有单 store 和多 store 的，有专门处理异步代码的（rxjs），还有连异步都不处理的（redux）.....，基本上可以满足各种场景的前端应用。

然而受制于小程序封闭的生态，各种状态方案的绑定库都无法在小程序内使用。已有的绑定库不能用？那就写一个呗。

状态管理的目标

在迈入正文前，先说一下我们对状态管理方案的一些诉求：

基于已有的状态管理方案，redux, mobx, rxjs，最大程度复用现有生态
Typescript 友好（ts 真香）
API 简单清晰，性能基线高，无需手动优化就能达到不错的性能。
少模板代码，代码敲多了手疼（说的就是 redux）

rxjs 学习曲线过于陡峭，也没定义状态如何存储，划掉；redux 概念挺多，模板代码和概念一样多，不要。那就剩下 mobx 了。

API

首先定义 store，并连接到页面。

`observer(context, mapState)`

import { observable } from 'mobx';
import { observer } from 'mobx-mini';
const rootStore = observable({
  title: 'mobx-app'
});
const store = observable({
  count: 0,
  get isOdd() {
    return this.seconds % 2 === 1;
  },
  tick() {
    this.count += 1;
  }
});
const mapState = () => ({
  count: store.count,
  seconds: store.isOdd,
  title: rootStore.title,
});
// page
Page({
  add() {
    store.tick();
  },
  onLoad() {
    observer(this, mapState);
  },
});

直接在 axml 中使用吧

<view>count</view>

实现原理

如果你还没有对 mobx 有所了解，建议看一下它的中文文档了解一下前置知识。
原理就是 observer APi 会对参数 mapState 中的 observable 对象注册 autorun 函数，在 autorun 内部，监听到 observable 变动后，直接对页面 setData 。小程序的 data 就会动态更新了。

总结

提醒一下，暂时只支持支付宝小程序，且未在生产环境中使用过。
源码在这里，只有100行不到。https://github.com/luv-sic/mobx-mini

参考

https://cn.mobx.js.org/
https://github.com/b5156/mobx-wxapp