Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.
/ mobx-logger Public archive

一个控制台日志输出库,让使用Taro+Mobx开发微信小程序获得更友好的状态调试体验

License

Notifications You must be signed in to change notification settings

zengkaiwen/mobx-logger

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

该项目目前在Mobx 5.x上使用会有问题!!!正在寻找解决方案!

taro-mobx-logger

让使用Taro+Mobx开发微信小程序获得更友好的状态调试

在使用Taro+Mobx开发小程序的时候,对于Mobx中状态的调试特别的不方便,所以借鉴redux-logger和mobx-logger,在了解了Mobx的基本用法之后,写了这么一个工具,方便使用Taro+Mobx的小伙伴能够愉快的在小程序的控制台里调试Mobx状态

Example 如图: Example

Install 安装

NPM: npm i taro-mobx-logger

Usage 用法

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实例的对象,也就是如上代码所示

License 许可

MIT

About

一个控制台日志输出库,让使用Taro+Mobx开发微信小程序获得更友好的状态调试体验

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published