mobx-mini
v0.5.5
Published
Mobx 支付宝小程序的绑定
Downloads
18
Maintainers
Readme
mobx-mini
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
目录