个人技术分享

安装

pnpm i mobx mobx-react-lite

store/counter.ts

import { makeObservable, observable, action, computed } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
      doubledCount: computed
    });
  }

  get doubledCount() {
    return this.count * 2
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

export default new CounterStore();

App.ts

import './App.css'
import { observer } from 'mobx-react-lite';
import CounterStore from './store/counter';

function App() {
  const counter = CounterStore; 

  return (
    <>
      <p>Count: {counter.count}</p>
      <p>Doubled Count: {counter.doubledCount}</p>
      <button onClick={() => counter.increment()}>Increment</button>
      <br />
      <br />
      <button onClick={() => counter.decrement()}>Decrement</button>
    </>
  )
}

export default observer(App)