// utils/useStores.js
import React from 'react'
import { MobXProviderContext} from 'mobx-react';
import RootStore from '~/stores/index'
const useStores = (name) => React.useContext(MobXProviderContext)[name]
export default useStores

// store.js
import { observable, action } from 'mobx';
class Store {
  @observable userInfo = { name: 'xsx' };
  @observable count = 11;
  @action
  handleClick() {
    this.count +=1;
  }
}
export default Store;

import React, { ReactElement } from 'react';
import Store from './store.ts';
import useStores from '~/utils/useStores';
import { useObserver, useObservable } from 'mobx-react-lite';
interface Props {
  [props: string]: any;
}
export default function index(props: any): ReactElement {
//  手動傳入字符串，選擇要使用的內容 該處為全局store的引用，與之前的class下的@inject('userStore')同理
  const globalStore = useStores('userStore'); 
  // 添加觀察者模式 該處為局部的store 與之前class下的  let myStore = new Store(); 同理
  let myStore = useObservable(new Store()); 
  return useObserver(() => (
    <div>
      {myStore.count}
      ====================
      {store.count}
      <button
        onClick={() => {
          myStore.handleClick();
          globalStore .handleClick();
        }}
      >
        add
      </button>
    </div>
  ));
}

import React from 'react';
import {useObserver, Observer， observer} from 'mobx-react';
import {appStore} from './appStore';
// 方法1：
function Methods1() {
    return useObserver(() => (
        <div onClick={() => {appStore.count = 1}}>{appStore.count}</div>
    ))
}
// 方法2(Observer一定要用函數(shù))：
function Methods2 () {
    return （
        <Observer>
            {() => <div onClick={() => {appStore.count = 1}}>{appStore.count}</div>}   
        </Observer>
    ）
}
// 方法3（推薦）：
export default observer(props => {
    return <div onClick={() => {appStore.count = 1}}>{appStore.count}</div>
})