mobx 引入

package.json

@@ -14,6 +14,8 @@
     "antd": "^5.8.4",
     "axios": "^1.4.0",
     "less": "^4.2.0",
+    "mobx": "^6.10.0",
+    "mobx-react": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0"

src/App.jsx

@@ -9,6 +9,7 @@ import {
 import { Breadcrumb, Layout, Menu, theme } from 'antd'
 const { Header, Content, Footer, Sider } = Layout
 import Login from '@/views/Login'
+import { useRootStore } from '@/store'
 function getItem(label, key, icon, children) {
   return {
     key,
@@ -32,6 +33,8 @@ const items = [
   getItem('Files', '9', <FileOutlined />),
 ]
 const App = () => {
+  const { countStore } = useRootStore()
+  const { count } = countStore
   const [collapsed, setCollapsed] = useState(false)
   const [isLogin, setIsLogin] = useState(false)
   const {
@@ -58,7 +61,7 @@ const App = () => {
             fontSize: '18px',
           }}
         >
-          Logo
+          {count}
         </div>
         <Menu
           theme='dark'

src/main.jsx

@@ -2,13 +2,16 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.jsx'
+import { RootStoreProvider } from '@/store'
 import '@/assets/css/reset.css'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <Router>
     <React.StrictMode>
-      <App />
+      <RootStoreProvider>
+        <App />
+      </RootStoreProvider>
     </React.StrictMode>
   </Router>,
 )

src/store/CountStore.js

@@ -0,0 +1,18 @@
+import { action, makeObservable, observable } from 'mobx'
+/**
+ * 状态被标记为observable
+ * 更改状态的方法标记为action.bound
+ * 组件使用observer方法包裹
+ */
+export default class CountStore {
+  constructor() {
+    this.count = 0
+    makeObservable(this, {
+      count: observable,
+      increment: action.bound,
+    })
+  }
+  increment() {
+    this.count++
+  }
+}

src/store/index.jsx

@@ -0,0 +1,24 @@
+import CountStore from './CountStore'
+import { createContext, useContext } from 'react'
+
+class RootStore {
+  constructor() {
+    this.countStore = new CountStore()
+  }
+}
+
+const rootStore = new RootStore()
+
+const RootStoreContext = createContext()
+
+export const RootStoreProvider = ({ children }) => {
+  return (
+    <RootStoreContext.Provider value={rootStore}>
+      {children}
+    </RootStoreContext.Provider>
+  )
+}
+
+export const useRootStore = () => {
+  return useContext(RootStoreContext)
+}

yarn.lock

@@ -1859,6 +1859,25 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+mobx-react-lite@^4.0.3:
+  version "4.0.4"
+  resolved "https://registry.npmmirror.com/mobx-react-lite/-/mobx-react-lite-4.0.4.tgz#eee3c55dfa6841365d5a7764971c456db12570fb"
+  integrity sha512-68uNYvQC/5Dazs3sIBv+bnpzRwcWde8y4ujHiLizhq8yeQtJ2tlNUGSh4r40gyE5M0utACIofBDsAj2hplcovQ==
+  dependencies:
+    use-sync-external-store "^1.2.0"
+
+mobx-react@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.npmmirror.com/mobx-react/-/mobx-react-9.0.0.tgz#056af3ab4dd8ccfb8c3c8258d19d641f084a03a1"
+  integrity sha512-rhUBWXK/k4H/jMXZqbL0uTPncRSvJR23tpmJemoAEjJjm0Fkv6tTLG3Cze9MIgvf882Kradx6msizuQxLAiQwA==
+  dependencies:
+    mobx-react-lite "^4.0.3"
+
+mobx@^6.10.0:
+  version "6.10.0"
+  resolved "https://registry.npmmirror.com/mobx/-/mobx-6.10.0.tgz#3537680fe98d45232cc19cc8f76280bd8bb6b0b7"
+  integrity sha512-WMbVpCMFtolbB8swQ5E2YRrU+Yu8iLozCVx3CdGjbBKlP7dFiCSuiG06uea3JCFN5DnvtAX7+G5Bp82e2xu0ww==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -2818,6 +2837,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 vite@^4.4.5:
   version "4.4.9"
   resolved "https://registry.npmmirror.com/vite/-/vite-4.4.9.tgz#1402423f1a2f8d66fd8d15e351127c7236d29d3d"