mobx-store-implementation

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

class TodoStore {
  @observable todos = [];
  @observable isLoading = false;
  @observable error = null;

  constructor() {
    makeObservable(this);
  }

  // ... actions and computed values
}

class TodoStore {
  // ...
  @computed
  get completedTodosCount() {
    return this.todos.filter(todo => todo.completed).length;
  }

  @computed
  get uncompletedTodos() {
    return this.todos.filter(todo => !todo.completed);
  }
}

class TodoStore {
  // ...
  @action
  addTodo(text: string) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }

  @action
  toggleTodo(id: number) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }
}

class TodoStore {
  // ...
  @action
  async fetchTodos() {
    this.isLoading = true;
    this.error = null;
    try {
      // 模拟 API 调用
      const response = await new Promise(resolve => 
        setTimeout(() => resolve([{ id: 1, text: 'Learn MobX', completed: false }]), 1000)
      );
      this.todos = response;
    } catch (e) {
      this.error = e;
    } finally {
      this.isLoading = false;
    }
  }
}

// RootStore.ts
import { makeObservable, observable } from 'mobx';
import { TodoStore } from './TodoStore';
import { UserStore } from './UserStore';

export class RootStore {
  @observable todoStore: TodoStore;
  @observable userStore: UserStore;

  constructor() {
    makeObservable(this);
    this.todoStore = new TodoStore();
    this.userStore = new UserStore();
  }
}