死在第一步系列
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中的数据 并且可以修改并实时响应
