1. 配置项。使用mobx,因为语法时es6-next,所以先配置 .babelrc 文件
{ "presets": [ ["es2015", { "loose": true }], "stage-1",//改动了这里 "react" ], "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"] //还有这里,transform-decorators-legacy 放在 数组的第一项 }
安装:
npm i transform-decorators-legacy babel-preset-stage-1 -D
npm i mobx-react -S
2. 使用 在store/app-state.js中:
import { observable, computed, autorun, action, } from 'mobx' class AppState { @observable count = 0; @observable name = 'jok' @computed get msg() { return `${this.name} say count is ${this.count}` } @action.add(){ this.count + =1; } } const appState = new AppState(); autorun(()=>{ console.log(appState.msg); }) setInterval(()=>{ appState.add(); }) export default appState;
调用方法: