该项目目前在Mobx 5.x上使用会有问题!!!正在寻找解决方案!
让使用Taro+Mobx开发微信小程序获得更友好的状态调试
在使用Taro+Mobx开发小程序的时候,对于Mobx中状态的调试特别的不方便,所以借鉴redux-logger和mobx-logger,在了解了Mobx的基本用法之后,写了这么一个工具,方便使用Taro+Mobx的小伙伴能够愉快的在小程序的控制台里调试Mobx状态
NPM: npm i taro-mobx-logger
Taro默认生成的Mobx模板src目录如下:
- src
|- store
| |- counter.js
|- pages
| |- index.jsx
app.jsx
第一步、你需要把mobx的store改成class的形式,并且使用mobx提供的action装饰操作状态的方法。例如,针对counter.js
Taro默认的Mobx store代码如下:
import { observable, action } from 'mobx'
const counterStore = observable({
counter: 0,
counterStore() {
this.counter++
},
increment() {
this.counter++
},
decrement() {
this.counter--
},
incrementAsync() {
setTimeout(() => {
this.counter++
}, 1000)
}
})
export default counterStore
改成class形式:
import { observable, action } from 'mobx'
class CounterStore {
@observable counter = 0;
@action.bound
counterStore() {
this.counter++
}
@action.bound
increment() {
this.counter++
}
@action.bound
decrement() {
this.counter--
}
@action.bound
incrementAsync() {
setTimeout(() => {
this.counter++
}, 1000)
}
}
const counterStore = new CounterStore();
export default counterStore;
第二步、修改app.jsx文件内容:
import { enableLogging } from 'taro-mobx-logger';
import counterStore from './store/counter'
// ...
const store = {
counterStore
}
if (process.env.NODE_ENV !== 'production') {
enableLogging(store)
}
// ...
注意:enableLogging传入的参数必须是包含多个store实例的对象,也就是如上代码所示
MIT