第一步

項(xiàng)目下運(yùn)行 npm run eject, 獲取項(xiàng)目配置

npm run eject

如果此時報錯，例如：

image.png

這是因?yàn)槲覀兪褂媚_手架創(chuàng)建一個項(xiàng)目的時候，自動給我們增加了一個.gitignore文件

image.png

這就需要在項(xiàng)目下輸入命令

git add .
git commit -m "隨便"

然后在執(zhí)行 npm run eject，成功后安裝 @babel/plugin-proposal-decorators

npm install --save-dev @babel/plugin-proposal-decorators

修改package.json中的babel配置

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

配置成功，

安裝 mobx mobx-react

npm install --save mobx mobx-react

創(chuàng)建store

import {observable,action,computed} from 'mobx'
export default class Store {
    @observable count = 1; // 定義可觀察的state

    @action // 定義改變state的動作
    changeCount(val) {
         this.count ++ 
    }
    @computed //衍生 (計算值與vue計算屬性類似）
    get isAdd () {
        return this.count > 3
    }
    @action//異步
    async getData() {
        await axios.get('XXXXX')
            .then(res => {
                console.log(res);
            })
    }
}

在根組件引入store

import {Provider} from 'mobx-react'
import store from './store/index'


const stores ={ Store: new store() } // 可以有多個store
ReactDom.render(<Provider {...stores}>
    <App />
</Provider>,document.getElementById('root'));

在組件中使用

import {observer,inject} from 'mobx-react'

@inject("Store") // 注入
@observer
export default class Demo extends Component {
    componentDidMount() {
         console.log(this.props.Store);// 獲取store
    }
}