mobx-mini

   


Mobx 支付宝小程序的绑定

Feature

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

API

#### observer(context, mapState)
首先，定义 /store/todo.js
``javascript
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
`javascript
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 中访问状态和计算属性
`xml

{{item.text}}

All todo item has done ? {{done.value}}
`





最佳实践

$3

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
`

$3

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

注意

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



Example


见 /example` 目录