mobx-mini

mobx-mini

   

Mobx 支付宝小程序的绑定

Feature

• 基于 Mobx，简单，灵活，性能强大
• Typescript 友好

API

observer(context, mapState)

首先，定义 /store/todo.js

import { reactive, computed } from 'mobx-mini';
let idx = 3;

const items = new Array(idx).fill(1).map((item, index) => {
  return {
    id: index,
    text: `Todo item ${index}`,
    completed: false
  }
})

// 定义状态
const todos = reactive(items);

// 计算属性
const done = computed(() => todos.every(todo => todo.completed));

// 更新状态
function toggleCompleted(id, completed) {
  const todo = todos.find(item => item.id === id);
  todo.completed = completed;
}

function addTodo(text) {
  todos.push({
    text,
    id: ++idx,
    completed: false,
  });
}

export { todos, done, toggleCompleted, addTodo };

映射状态到页面或组件 /pages/todos/todos.js

import { todos, done, toggleCompleted } from '../../store/todo';
import { observer } from 'mobx-mini';

const mapState = () => ({
  todos,
  done
})

Page({
  add() {
    store.tick();
  },
  onLoad() {
    observer(this, mapState);
  },
});

在 axml 中访问状态和计算属性

<view a:for="{{todos}}">
  {{item.text}}
</view>
<view>All todo item has done ? {{done.value}}</view>

最佳实践

状态管理和视图层解耦

store 应有独立的目录结构，不要和 page 或 component 放在一起

example
├── README.md
├── app.acss
├── app.js
├── app.json
├── assets
│   └── logo.png
├── components
│   ├── add-button
│   │   ├── add-button.acss
│   │   ├── add-button.axml
│   │   ├── add-button.js
│   │   └── add-button.json
│   └── counter
├── pages
│   ├── add-todo
│   │   ├── add-todo.acss
│   │   ├── add-todo.axml
│   │   ├── add-todo.js
│   │   └── add-todo.json
│   └── todos
│       ├── todos.acss
│       ├── todos.axml
│       ├── todos.js
│       └── todos.json
└── store
    └── todo.js

状态的更新应统一管理

不要在除 store 外的地方更新状态，见 /example 

注意

• 访问计算属性的要通过 computedRef.value 
• 处于性能考量，状态同步到视图层是异步的，你可能需要通过 nextTick  来获取更新后的 this.data 

Example

见 /example 目录