React中使用Mobx填坑

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裝飾器報錯