創(chuàng)建react項(xiàng)目

npx create-react-app my-app

釋放webpack配置

yarn eject(沒(méi)有g(shù)it提交需要commit一下，不要push)

下載裝飾器插件

yarn add @babel/plugin-proposal-decorators
- 配置package.json
  "babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }

下載mbox和mbox-react

 yarn add mbox mbox-react -D

新建store文件夾 store

store/person.js

import { observable,computed, action } from "mobx"


class Person {
  // @observable 變量名 = 值
  @observable obj = {
    username: "張三",
    sex:"男"
  }
  @observable age = 18

  @computed //當(dāng)age發(fā)生改變時(shí)， 自動(dòng)觸發(fā)
   get doubleAge() {
    return this.age * 2
   }

  @action setName(name){ // 用戶(hù)操作  事件調(diào)用
      this.obj.username = name
  }
   // @action 方法名(參數(shù)) {
  //     console.log(參數(shù))
  // }
  @action setAge(){ // 用戶(hù)操作  事件調(diào)用
      console.log("this.age",this.age)
      this.age+=this.age
  }
}
const person = new Person()
export default person

store/index

import person from "./person.js"
const store = {
  person
}
export default store

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './store'
import { Provider } from 'mobx-react'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
  <App />
</Provider>
);

App.js

import React, { Component } from 'react'
import {inject,observer} from 'mobx-react'
@inject('store')
@observer
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      age: 18
    }
  }
  mutateAge = ()=>{
    this.props.store.person.setAge()
  }
  componentDidMount() {
    console.log("this.props",this.props)
  }
  render() {
    return (
      <div>
        我是App組件
        <ul>
          <li>姓名:{this.props.store.person.obj.username}</li>
          <li>年齡:{this.props.store.person.age}</li>
          <li>雙倍年齡:{this.props.store.person.doubleAge}</li>
          <li>性別:{this.props.store.person.obj.sex}</li>
        </ul>
        <button onClick={this.mutateAge}>修改年齡</button>
      </div>
    )
  }
}