# npm
npm install mobx
 
# yarn
yarn add mobx
 
# pnpm
pnpm add mobx

# 安装 React 绑定（mobx-react 包含 mobx-react-lite）
npm install mobx mobx-react
 
# 或使用轻量版（仅函数组件）
npm install mobx mobx-react-lite
 
# pnpm
pnpm add mobx mobx-react

# Babel 装饰器插件
npm install --save-dev @babel/plugin-proposal-decorators
 
# 或使用 SWC（推荐，更快）
# 在 .swcrc 中配置：
# "jsc": { "transform": { "legacyDecorator": true } }

<script src="https://cdn.jsdelivr.net/npm/mobx@6/dist/mobx.umd.production.min.js"></script>

import { makeAutoObservable } from 'mobx';
 
// 1. 定义 Store
class TodoStore {
  todos = [];
 
  constructor() {
    makeAutoObservable(this);
  }
 
  // computed 值——自动推导
  get completedCount() {
    return this.todos.filter(t => t.completed).length;
  }
 
  // action——修改状态
  addTodo(text) {
    this.todos.push({ text, completed: false, id: Date.now() });
  }
 
  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.completed = !todo.completed;
  }
}
 
// 2. 创建实例
const store = new TodoStore();
 
// 3. 自动响应（reaction）
import { autorun } from 'mobx';
 
autorun(() => {
  console.log(`待办总数: ${store.todos.length}, 已完成: ${store.completedCount}`);
});
 
// 4. 修改状态——自动触发上面的日志
store.addTodo('学习 MobX');
// 输出: "待办总数: 1, 已完成: 0"
 
store.toggleTodo(store.todos[0].id);
// 输出: "待办总数: 1, 已完成: 1"

import React from 'react';
import { observer } from 'mobx-react';
import { makeAutoObservable } from 'mobx';
 
// Store
class CounterStore {
  count = 0;
 
  constructor() {
    makeAutoObservable(this);
  }
 
  increment() {
    this.count += 1;
  }
 
  get doubleCount() {
    return this.count * 2;
  }
}
 
const store = new CounterStore();
 
// 组件——用 observer 包裹
const Counter = observer(() => (
  <div>
    <p>计数: {store.count}</p>
    <p>双倍: {store.doubleCount}</p>
    <button onClick={() => store.increment()}>+1</button>
  </div>
));
 
export default Counter;

import { observable, makeAutoObservable } from 'mobx';
 
// 方式 1：函数式 API（推荐）
class Store {
  name = 'MobX';
  count = 0;
 
  constructor() {
    makeAutoObservable(this); // 自动将所有属性标记为 observable，方法为 action
  }
}
 
// 方式 2：observable() 包装
const state = observable({ count: 0, user: { name: 'Alice' } });

class Store {
  firstName = '张';
  lastName = '三';
 
  constructor() {
    makeAutoObservable(this);
  }
 
  get fullName() {
    return this.firstName + this.lastName;
  }
}

class Store {
  count = 0;
 
  constructor() {
    makeAutoObservable(this);
  }
 
  increment() {
    this.count++; // 这是一个 action
  }
 
  // 异步 action
  async fetchData() {
    const data = await fetch('/api/data').then(r => r.json());
    this.count = data.count; // 异步 action 中修改状态
  }
}

import { autorun, reaction, when } from 'mobx';
 
// autorun：每次依赖变化都执行
const dispose = autorun(() => {
  console.log('当前计数:', store.count);
});
dispose(); // 手动清理
 
// reaction：只在特定数据变化时执行回调
reaction(
  () => store.count,           // 追踪函数
  (count) => console.log(`变为 ${count}`),  // 副作用
  { fireImmediately: true }    // 选项
);
 
// when：只在条件首次满足时执行一次
when(
  () => store.loaded === true,
  () => console.log('数据加载完成！')
);

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "experimentalDecorators": true,      // 使用装饰器语法时需要
    "useDefineForClassFields": false     // 装饰器与类字段配合需要
  }
}

// babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
  ]
}

// 开发环境下启用 MobX 严格模式（只允许通过 action 修改状态）
import { configure } from 'mobx';
 
configure({
  enforceActions: 'observed',  // 所有 observable 都必须通过 action 修改
  computedRequiresReaction: process.env.NODE_ENV === 'development',  // computed 不应在 reaction 外被读取
  reactionRequiresObservable: process.env.NODE_ENV === 'development', // reaction 必须有 observable 依赖
  observableRequiresReaction: process.env.NODE_ENV === 'development', // observable 不应在 render 外读取
  disableErrorBoundaries: process.env.NODE_ENV === 'development',
});

// Vite 配置
import { defineConfig } from 'vite';
 
export default defineConfig({
  esbuild: {
    // 如果需要装饰器支持
    tsconfigRaw: {
      compilerOptions: {
        experimentalDecorators: true,
      },
    },
  },
});

// Vitest/Jest 测试示例
import { makeAutoObservable, runInAction } from 'mobx';
 
test('counter store increments correctly', () => {
  class CounterStore {
    count = 0;
    constructor() { makeAutoObservable(this); }
    increment() { this.count++; }
  }
 
  const store = new CounterStore();
  expect(store.count).toBe(0);
  store.increment();
  expect(store.count).toBe(1);
});
 
// 异步 action 测试
test('async action updates state', async () => {
  class DataStore {
    data = null;
    loading = false;
    constructor() { makeAutoObservable(this); }
    async fetchData() {
      this.loading = true;
      const result = await fetchMock();
      runInAction(() => {
        this.data = result;
        this.loading = false;
      });
    }
  }
 
  const store = new DataStore();
  await store.fetchData();
  expect(store.loading).toBe(false);
  expect(store.data).toBeDefined();
});

// ✅ 推荐——一行搞定，自动推断所有属性
class UserStore {
  name = '';
  age = 0;
 
  constructor() {
    makeAutoObservable(this);
  }
 
  get isAdult() { return this.age >= 18; }
  setName(name) { this.name = name; }
}
 
// ❌ 不推荐——手动标注每个属性（除非需要精细控制）
class UserStore {
  name = observable.ref('');
  // ...
}

// ✅ 推荐
store.name = 'Alice'; // 在 action 中修改（严格模式下必须在 action 中）
 
// ❌ 避免（在 action 外部直接修改）
// 如果开启了 enforceActions，会抛出错误

// ❌ 错误——解构后失去响应性
const UserCard = observer(({ store }) => {
  const { name, age } = store; // 解构基本类型，断开追踪
  return <p>{name} - {age}</p>;
});
 
// ✅ 正确——在 render 内部直接访问
const UserCard = observer(({ store }) => {
  return <p>{store.name} - {store.age}</p>; // 保持响应性
});
 
// ✅ 也可以——解构对象引用仍保持响应性
const UserCard = observer(({ store }) => {
  const { user } = store; // user 是对象引用，仍然响应式
  return <p>{user.name}</p>;
});

class DataStore {
  data = null;
  loading = false;
 
  constructor() { makeAutoObservable(this); }
 
  // ✅ 推荐——使用 flow
  fetchData = flow(function* () {
    this.loading = true;
    try {
      const result = yield fetch('/api/data').then(r => r.json());
      this.data = result;
    } finally {
      this.loading = false;
    }
  });
 
  // ✅ 也可以——async + runInAction
  async fetchDataAsync() {
    this.loading = true;
    try {
      const result = await fetch('/api/data').then(r => r.json());
      runInAction(() => {
        this.data = result;
        this.loading = false;
      });
    } catch (e) {
      runInAction(() => { this.loading = false; });
    }
  }
}

// ✅ 在 useEffect 中清理
useEffect(() => {
  const dispose = autorun(() => {
    console.log('count:', store.count);
  });
  return dispose; // 组件卸载时清理
}, []);
 
// ✅ 使用 when 一次性监听
useEffect(() => {
  return when(
    () => store.ready,
    () => console.log('准备好了！')
  );
}, []);

// ✅ 推荐——按领域拆分
class UserStore { /* 用户相关状态 */ }
class OrderStore { /* 订单相关状态 */ }
class CartStore { /* 购物车相关状态 */ }
 
// Store 之间可以互相引用
class AppStore {
  userStore;
  orderStore;
  cartStore;
 
  constructor() {
    this.userStore = new UserStore();
    this.orderStore = new OrderStore(this);
    this.cartStore = new CartStore(this);
    makeAutoObservable(this);
  }
}
 
// ❌ 避免——单个巨大 Store
class MegaStore {
  // 100+ 属性和方法...
}

// ❌ 滥用 keepAlive——computed 永不释放
class Store {
  get expensiveData() {
    return computeExpensiveResult(this.rawData);
  }
}
// 如果设置 @computed({ keepAlive: true })，即使无人读取也会持续计算
 
// ✅ 让 computed 自然挂起——无人观察时自动释放
class Store {
  get expensiveData() {
    return computeExpensiveResult(this.rawData);
  }
  // MobX 自动管理生命周期，无需 keepAlive
}