最新版本MobX的使用

安装依赖

$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 {Provider} from 'mobx-react'
import store from './store/index'
ReactDOM.render(
  <React.StrictMode>
    {/* <Provider > */}
      <App store={store} />
    {/* </Provider> */}
  </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);