下載配置mobx，mobx-react

[前往參考項目]: ( https://github.com/danielbischoff/react-mobx-starter/tree/3869d6e4104a3ddcafd847792b8a8a91a725bcb5 )

1.下載mobx6 ， mobx-react

npm install mobx mobx-react --save

2.新建store

src目錄下新建store文件

image-20210122105743115.png

3.AppStore.ts

這個文件是mbx定義數據源和方法的文件，

mobx6的api很少，最主要的是 makeAutoObservable ，這個api是自定監聽和綁定值，也不需要再寫之前很多的@符號綁定，直接定義變量，是不是特別像vuex。

注意如果你要定義json這種有引用類型的數據，如果打印數據出來是proxy的話，你就需要用 toJS 這個方法轉義一下返回。

 import {makeAutoObservable,toJS} from "mobx";
 export class AppStore {
    // store數據
    count=0;
    arr=[
        {
            name:"首頁",
            page:"index",
        },
        {
            name:"登錄",
            page:"/login",
        },
    ];
     constructor(){
        //  自定綁定
        makeAutoObservable(this);
     }
    // 方法
    addCount=(val)=>{
        this.count=val;
    }
    get getJson(){
        return toJS(this.arr)
    }
 }

4.AppContext.ts

export {AppStore} from "./AppStore";

5.index.tsx

這個文件中主要是將定義的mobx實例和react中的Context結合，實現全局的狀態共享。

import React from "react";
import {AppStore}  from "./AppContext";

export function createStore(){
    return { appstore:new AppStore() }
}

export const stores = createStore();

export const AppContext=React.createContext(stores);

6.入口文件注入

在src->index.tsx中更改成如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AppContext ,stores } from "@/store";

ReactDOM.render(
    <AppContext.Provider value={stores}>
       <App />
    </AppContext.Provider>,
  document.getElementById('root')
);

7.在組件中使用

import React,{FC,useEffect , useContext} from 'react';
import { observer } from "mobx-react";
import { AppContext } from "@/store";
import {Button} from 'antd' 
import '@/assets/less/App.less';

const App:FC=()=> {
  //mobx初始化
  const { appstore } =useContext(AppContext);
  console.log("appstore",appstore.count,appstore.getJson);
  
  useEffect(() => {
    const script = document.createElement('script')
      script.id = 'themeJs'
      script.src = '/less.min.js'
      document.body.appendChild(script)

      setTimeout(() => {
        const themeStyle = document.getElementById('less:color')
        if (themeStyle) localStorage.setItem('themeStyle', themeStyle.innerText)
      }, 500)
  }, [])

  return (
    <div className="App">
       app index
       <br/>
       <Button type="primary">Primary Button</Button>
        <button>點我</button>
      <Button type="primary">
          Search
        </Button>
    </div>
  );
}

export default  observer(App);

可以看到控制臺正常打印數據

image-20210122111029470.png

結束。