typescript项目使用mobx-4

下载配置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

结束。