react+mobx 基础配置

为什么80%的码农都做不了架构师？>>>   

mobx 需要使用decorator 修饰器语法  但项目默认是不支持的   此时我们需要配置以下

一 创建项目后  先使用  npm run eject 弹出webpack配置  否则我们的packge.json 没有我们需要的配置项

 

此时我们的package.json 的最后就会有我们需要的babel配置

注意: 在mac系统上如果对这个项目进行过操作,npm run eject可能会报出错误  此时使用

git add .(add后空格 点)

git commit -am "Save before ejecting"

再使用npm run eject即可解决

windows上没有这个问题

 

package.json

二. 安装支持装饰器所需依赖:    npm i --save-dev babel-plugin-transform-decorators-legacy

 

 

 

三. 安装  @babel/plugin-proposal-decorators

 

 

现在修饰器语法应该没问题了  开始装mobx

四.安装Mobx 和 mobx-react

npm install mobx --save    

npm install mobx-react --save

五 .配置 package.json

"babel": {
  "presets": [
    "react-app"
  ],
 "plugins": [
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ],
   [
     "@babel/plugin-proposal-class-properties",
     {
       "loose":true
     }
   ]
 ]
},

 

package.json

现在运行项目   就不会报错了

六 .现在建一个store.js 存储数据 其中可以使用@observalbe 和 @action来声明数据和 方法

 

 

store.js

七:现在就可以访问store中的数据了

 

 

component/index.js

最后把 component/index.js 导入 APP.js就可以了   

注意 要在类的上方使用修饰器 @observer 声明这个组件是一个被监听的组件  否则 数据不能随之改变 

 

结果截图

 

 

 

点击按钮之前

 

点击按钮之后

可以看到  在index中访问到了 store.js中的数据  并且可以修改并实时响应

 

转载于:https://my.oschina.net/woddp/blog/3011419