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