mobx的使用

1. mobx的使用

import { createContext, useContext } from 'react'
import { makeAutoObservable } from 'mobx'

class Store {
  name = 'ziding'
  constructor() {
    makeAutoObservable(this)
  }
}

export const StoreContext = createContext<Store | null>(null)

export const useStore = () => {
  const store = useContext(StoreContext)

  if (!store) {
    throw new Error('useStore 必须在 StoreProvider 中使用')
  }

  return store
}

export default Store

import React, { useEffect } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import Store, { StoreContext } from './Store'
import CustomerMv from './components/CustomerMv'
import styles from './style.module.less'

interface OrderTabProps {
  customerId: number | string
  userId: number | string
}

const OrderTab = (props: OrderTabProps) => {
  const store = useLocalObservable(() => new Store())

  const { customerId, userId } = props

  useEffect(() => {
    store?.getUserOrderInfo(Number(userId ?? 0))
  }, [userId])

  return (
    <StoreContext.Provider value={store}>
      <div className={styles.tab}>
        <CustomerMv userId={userId} />
      </div>
    </StoreContext.Provider>
  )
}

export default observer(OrderTab)

import React, { useEffect } from 'react'
import { observer } from 'mobx-react'
import { useStore } from '@/domains/customer/components/OrderTab/Store'
import MvTable from './MvTable'

interface CustomerMvProps {
  userId: number | string
}

const CustomerMv = (props: CustomerMvProps) => {
  const store = useStore()
  const { userId } = props

  useEffect(() => {
    if (userId) {
      store?.getMvList(Number(userId))
    }
  }, [userId])

  return (
    <div>
      <MvTable userId={Number(userId ?? 0)} />
    </div>
  )
}

export default observer(CustomerMv)