最简单的小程序状态管理方案! - mobx-mini

写在前面

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

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

状态管理的目标

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

1. 基于已有的状态管理方案，redux,mobx,rxjs，最大程度复用现有生态
2. Typescript 友好（ts 真香）
3. API 简单清晰，性能基线高，无需手动优化就能达到不错的性能。
4. 少模板代码，代码敲多了手疼（说的就是 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行不到。github.com/luv-sic/mob…

参考

cn.mobx.js.org/
github.com/b5156/mobx-…