第一步
項目下運行 npm run eject, 獲取項目配置
npm run eject
如果此時報錯漱挚，例如：
image.png
這是因為我們使用腳手架創(chuàng)建一個項目的時候凉倚，自動給我們增加了一個.gitignore文件
image.png
而我們本地卻沒有文件倉庫
這就需要在項目下輸入命令
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
}
}
