Mobx的简单使用

Mobx是一个用于状态管理的JavaScript库，它可以帮助你管理应用程序中的可观察状态，并自动追踪状态的变化以及相应的副作用。

下面是一个简单的示例代码，展示了如何使用Mobx来管理一个计数器的状态：

首先，你需要安装Mobx和mobx-react这两个库：

npm install mobx mobx-react

下一步新建store.count.js.名字可以自己定义

import { makeAutoObservable } from 'mobx'

class countStore {
    count = 0;
    constructor() {
        makeAutoObservable(this);
      }
    addCount() {
        this.count += 1
    }
}
export { countStore }

然后在store文件夹下面新建一个index.js内容如下

将上面创建的js引入进来

import React from 'react';
import { countStore } from './store.count';

const stores = React.createContext({
    counter: new countStore(),
});
const useStores = () => React.useContext(stores)
export { useStores };   

然后在使用时如下

import { useStores as store } from './store/index';
import { observer } from 'mobx-react'

function App() {

  let {counter} = store()
  return (
    <div className="App">
      app
      <h1>计数器</h1>
      <p>当前计数：{counter.count}</p>
      <button onClick={() => counter.addCount()}>增加</button>
    </div>
  );
}

export default observer(App);