react+mobx 基础配置

死在第一步系列

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

package.json

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

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

store.js

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

component/index.js

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

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

结果截图

点击按钮之前

点击按钮之后

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