feature: ✨ 新增状态管理Mobx v6

README.md

@@ -15,7 +15,8 @@
 -   TypeScript v4
 -   webpack v5
 -   axios
--   mobx-react-lite
+-   mobx v6
+-   mobx-react-lite v3
 -   react-router-dom v6
 -   postcss-px-to-viewport
 

package.json

@@ -20,7 +20,6 @@
     "scripts": {
         "dev": "npm run start",
         "start": "env-cmd -r .env.json -e development node webpack/server",
-        "build": "npm run build:qa npm run build:prod",
         "build:qa": "env-cmd -r .env.json -e qa webpack --config ./webpack/config/webpack.prod.js",
         "build:prod": "env-cmd -r .env.json -e production webpack --config ./webpack/config/webpack.prod.js"
     },
@@ -106,6 +105,8 @@
         "webpackbar": "^5.0.2"
     },
     "dependencies": {
+        "mobx": "^6.8.0",
+        "mobx-react-lite": "^3.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.8.1"

src/store/about/index.ts

@@ -0,0 +1,16 @@
+import {makeAutoObservable} from 'mobx';
+import {globalStore} from '../global';
+
+class About {
+    constructor() {
+        makeAutoObservable(this);
+    }
+    count = 0;
+    aboutAddCount = () => {
+        const {count: globalCount} = globalStore;
+        this.count += globalCount;
+    };
+}
+
+const aboutStore = new About();
+export {aboutStore};

src/store/global/index.ts

@@ -0,0 +1,18 @@
+import {makeAutoObservable} from 'mobx';
+
+class Global {
+    constructor() {
+        makeAutoObservable(this);
+    }
+    count = 0;
+    name = 'react';
+    addCount = () => {
+        this.count++;
+    };
+    setName = (data: string) => {
+        this.name = data;
+    };
+}
+
+const globalStore = new Global();
+export {globalStore};

src/store/index.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {configure} from 'mobx';
+import {globalStore} from './global';
+import {aboutStore} from './about';
+
+configure({enforceActions: 'always'}); // 任何状态都能只能通过actions来修改，在实际开发中也包括新建状态。
+
+export const stores = {globalStore, aboutStore};
+
+export const storesContext = React.createContext(stores);
+
+export const useStores = () => React.useContext(storesContext);

src/view/About/index.less

@@ -1,5 +1,6 @@
 .about-root {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100vw;

src/view/About/index.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {useStores} from '@/store';
 import './index.less';
 
 const About = () => {
+    const {globalStore} = useStores();
+    const {count, name} = globalStore;
     return (
         <div className='about-root'>
             <p>Hello About</p>
+            <p>{name}</p>
+            <p>{count}</p>
         </div>
     );
 };
 
-export default About;
+export default observer(About);

src/view/Home/HomeOne/index.less

@@ -1,6 +1,7 @@
 .home-one-root {
     display: flex;
     flex: 1;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;

src/view/Home/HomeOne/index.tsx

@@ -1,8 +1,21 @@
 import React from 'react';
+import {observer} from 'mobx-react-lite';
+import {useStores} from '@/store';
 import './index.less';
 
 const HomeOne = () => {
-    return <div className='home-one-root'>HomeOne</div>;
+    const {globalStore, aboutStore} = useStores();
+    const {count, name} = globalStore;
+    const {count: aboutCount} = aboutStore;
+
+    return (
+        <div className='home-one-root'>
+            HomeOne
+            <p>{name}</p>
+            <p> globalStore: {count}</p>
+            <p> aboutStore: {aboutCount}</p>
+        </div>
+    );
 };
 
-export default HomeOne;
+export default observer(HomeOne);

src/view/Home/index.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
 import {useNavigate, Link, Outlet} from 'react-router-dom';
+import {useStores} from '@/store';
 import './index.less';
 
 function Home() {
+    const {globalStore, aboutStore} = useStores();
+    const {addCount, setName} = globalStore;
+    const {aboutAddCount} = aboutStore;
     const navigate = useNavigate();
 
     const handleClickLink = () => {
         navigate('/home/one'); // 跳转路由
     };
+    const handleClickAddCount = () => {
+        addCount();
+        aboutAddCount();
+    };
+    const handleClickSetName = () => {
+        setName(`Hello${Math.random() * 10}`);
+    };
 
     return (
         <div className='home-root'>
@@ -17,6 +28,12 @@ function Home() {
                 <div className='btn' onClick={handleClickLink}>
                     使用navigate方式跳转HomeOne navigate('/home/one')
                 </div>
+                <div className='btn' onClick={handleClickAddCount}>
+                    Mobx数据更新-addCount
+                </div>
+                <div className='btn' onClick={handleClickSetName}>
+                    Mobx数据更新-setName
+                </div>
             </div>
             <Outlet />
         </div>

yarn.lock

@@ -6135,6 +6135,16 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npmmirror.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+mobx-react-lite@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmmirror.com/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz#d59156a96889cdadad751e5e4dab95f28926dfff"
+  integrity sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==
+
+mobx@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.npmmirror.com/mobx/-/mobx-6.8.0.tgz#59051755fdb5c8a9f3f2e0a9b6abaf86bab7f843"
+  integrity sha512-+o/DrHa4zykFMSKfS8Z+CPSEg5LW9tSNGTuN8o6MF1GKxlfkSHSeJn5UtgxvPkGgaouplnrLXCF+duAsmm6FHQ==
+
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"