React中使用Mobx填坑

版权声明：本文为博主原创文章，未经博主允许不得转载！！！ https://blog.csdn.net/qq_19107011/article/details/82912330

React中使用Mobx填坑

前言

最近学习React想使用Mobx进行数据管理（感觉比Redux简单），然后就发现使用Mobx使用@报错了
一路查资料。下面记录可行的方法

开始

我开发工具是webstome，下面使用这个工具初始化一个react脚手架项目

npm命令行直接怼下面四个命令

npm run eject
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-react-native-stage-0 --save-dev
npm install --save mobx mobx-react

然后根目录下新建文件.babelrc
内容如下

"presets": ["react-native-stage-0/decorator-support"]

最后创建Store测试是否可以正常运行

import {observable,action} from "mobx";

class Store {
    // 利用
    @observable todos = []
    @observable name = 'test'
    @action getName = () => {
        return this.name;
    }
}

export default new Store()

启动成功,功能正常！！！

码云

弄了一个demo放在码云上面了可以直接跑

参考

create-react-app + mobx其中@observer装饰器报错