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

发布时间：2020-12-15 16:20:33 所属栏目：百科来源：网络整理

导读：1.? 配置项。使用mobx，因为语法时es6-next，所以先配置 .babelrc 文件 { "presets" : [ [ "es2015",{ "loose": true }], "stage-1", // 改动了这里 "react" ], "plugins": ["transform-decorators-legacy","react-hot-loader/babel" ] // 还有这里，transfo

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;

调用方法：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!