webpack 配置react脚手架（五）：mobx

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;

调用方法：

标签：count,decorators,webpack,transform,react,mobx,legacy,appState
来源： https://www.cnblogs.com/xiaozhumaopao/p/10999579.html