mobx的使用

在react中，使用store来管理公共的数据，之前是使用react-redux，发现使用react-redux来操作管理数据会特别麻烦，mobx的出现以及使用，使用步骤也简单，下面来使用mobx来操作一个变量，实现变量加减操作。

1. 下载依赖

npm install mobx mobx-react-lite

2. 在src目录下创建store目录，store目录下创建index.ts和count.store.ts，因为这里的例子是操作一个变量count，所以文件名起成count.store.ts，比较语义化。

3. count.store.ts代码如下，mobx的写法跟class写法一样，所以上手起来便捷

import {makeAutoObservable} from 'mobx';
class CountStore{
    count:number=0;
    constructor(){
        makeAutoObservable(this);
    }
    addCount(){
        this.count+=1;
    }
    minusCount(){
        this.count-=1;
    }
}
export default CountStore;

4. 在store/index.ts中引入count.store.ts，以及讲store和context管理起来，基本模板都是这样，只需要引入对应的store，和在constructor中实例化

import React from 'react';
import CountStore from './count.store';
class RootStore{
    countStore:any;
    constructor(){
        this.countStore = new CountStore();
    }
}
const rootStore = new RootStore();
const context = React.createContext(rootStore);
const useStore = ()=>React.useContext(context);
export{
    useStore
}

5、使用

import { observer } from 'mobx-react-lite';
import { useStore } from '@/store'
import './index.scss';
function Index() {
    const { countStore } = useStore()
    return (
        <>
        <div className='index '>
            <span>{countStore.count}</span>
        </div>
        <button onClick={() => countStore.addCount()}>add</button>
        </>
        )
    }
export default observer(Index);