安装依赖
$yarn add #babel/plugin-proposal-class-properties
$yarn add #babel/plugin-proposal-class-decorators
$yarn add mobx
$yarn add mobx-react
配置package.json babel
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-properties",
{
"loose": true
}
]
]
},
store文件
const {
makeAutoObservable } = require("mobx")
import request from '../utils/index'
class Store {
prolist = []
constructor() {
makeAutoObservable(this)
}
getList() {
request("/pro/list").then(res=>{
this.prolist = res.data.data
})
}
}
const store = new Store()
export default store
入口文件
- 无需Provider 直接挂在app上 也就是说,在使用时无需使用inject来注入,更加便捷
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index'
ReactDOM.render(
<React.StrictMode>
{
}
<App store={
store} />
{
}
</React.StrictMode>,
document.getElementById('root')
);
使用文件
import React, {
useEffect } from 'react'
import {
observer } from 'mobx-react'
function App (props) {
console.log(props);
useEffect(() => {
props.store.getProlist()
}, [])
return (
<>
hello mobx
{
props.store.prolist.map((item, index) => {
return (
<div key={
index}>
{
item.proname}
</div>
)
})
}
</>
)
}
export default observer(App);