React使用Mobx6.x共享状态问题

yarn add mobx mobx-react-lite

import { makeAutoObservable } from "mobx"
export default makeAutoObservable({
    count: 0,
    addCount() {
        this.count++
    }
})

import { useEffect } from 'react'
import countStore from '@/store/count'
import { observer } from "mobx-react-lite"
export default observer(() => {
    //监听mobx触发事件
    useEffect(() => {
        console.log(countStore.count)
    }, [countStore.count])
    return (
        <div>
            <div>count为：{countStore.count}</div>
            <button onClick={() => countStore.addCount()}>+1</button>
        </div>
    )
})

npm install  mobx mobx-react -S

  npm i --save-dev babel-plugin-transform-decorators-legacy

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

import { observable, computed, action } from "mobx";
class OrderLine {
	// 被观察者属性
    @observable price = 0;
    @observable amount = 1;
    // 计算属性  
    @computed
    get total() {
        return this.price * this.amount;
    }
    @observable length = 2;
    @computed
    get squared() {
        return this.length * this.length;
    }
    set squared(value) {
        // 这是一个自己的动作，不需要注解
        this.length = Math.pow(2, value);
    }
    //触发的动作
    @action.bound
    resize() {
        this.price++;
    }
}
export default OrderLine;

import OrderLine from "./OrderLine";
class Stores {
    constructor() {
        this.orderLine = new OrderLine();  //每次创建的状态在这里注入
    }
}
export default new Stores();

import React, { Component } from "react";
import MobxTest from "./Components/Mobox/MobxTset01";
import stores from "./Components/Mobox/store";
import { Provider } from "mobx-react";
class App extends Component {
    render() {
        return (
            <Provider {...stores}>
                <MobxTest />
            </Provider>
        );
    }
}
export default App;

import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { observable } from "mobx";
//@inject() 将组件链接到 stores,以props的形式传递给目标组件
@inject("orderLine")
@observer  //观察者
class MobxTest extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {
    console.log("componentWillMount方法");
  }
  onReset() {
    this.props.orderLine.resize(); //状态中定义的方法从而改变仓库中的值
  }
  render() {
    //通过发现仓库中定义的值,和方法都可以通过props属性拿到注入orderLine所有属性和方法
    console.log(this.props,'this.props');
    console.log(this.props.orderLine.amount);
    return (
      <div>
        <p>{this.props.orderLine.total}</p>
        {/* <p>{this.secondsPassed}</p> */}
        <p>{this.props.orderLine.total}</p>
        <button onClick={this.onReset.bind(this)}>按钮</button>
      </div>
    );
  }
}
export default MobxTest;