本文共 3880 字，大约阅读时间需要 12 分钟。

MobX Todo 应用状态管理实现

1. TodoListStore 实现

TodoListStore 负责管理待办事项的存储与操作。其核心功能包括：

• 初始化状态：接受一个包含待办事项的数组，进行初始化。
• 操作方法：通过 MobX 的可观察状态实现增删改查。
• 计算属性：提供未完成事项的数量。

核心代码

import { makeObservable, observable, action, computed } from 'mobx';import TodoViewStore from './TodoViewStore';class TodoListStore {  todos = [];  filter = 'all';    constructor(todos) {    if (todos) this.todos = todos;    makeObservable(this, {      todos: observable,      createTodo: action,      deleteTodo: action,      clear: action.bound,      changeFilter: action.bound,      unCompletedTodoCount: computed,      filterTodos: computed    });  }  // 创建待办事项  createTodo(title) {    this.todos.push({      id: Math.random(),      title,      completed: false    });  }  // 删除待办事项  deleteTodo(todoId) {    const todoIndex = this.todos.findIndex(todo => todo.id === todoId);    this.todos.splice(todoIndex, 1);  }  // 清空所有待办事项  clear() {    this.todos = [];  }  // 切换过滤方式  changeFilter(filter) {    this.filter = filter;  }  // 获取过滤后的待办事项  get filterTodos() {    switch (this.filter) {      case 'all':        return this.todos;      case 'active':        return this.todos.filter(todo => !todo.completed);      case 'completed':        return this.todos.filter(todo => todo.completed);      default:        return this.todos;    }  }  // 未完成事件数量  get unCompletedTodoCount() {    return this.filterTodos.length;  }}

2. TodoViewStore 实现

TodoViewStore 用于管理单个待办事项的状态。其主要功能包括：

• 初始化状态：接收标题并初始化完成状态。
• 切换状态：通过 MobX 实现完成状态的切换。
• 绑定操作：确保操作方法与组件绑定。

核心代码

import { action, makeObservable, observable } from 'mobx';class TodoViewStore {  id = Math.random();  title = '';  completed = false;  constructor(title) {    this.title = title;    makeObservable(this, {      completed: observable,      toggle: action.bound    });  }  toggle() {    this.completed = !this.completed;  }}

3. 组件实现

TodoFooter 组件

import { observer } from 'mobx-react-lite';import { useTodoListStore } from '../../stores/TodoStore/TodoListStore';function TodoFooter() {  const todoListStore = useTodoListStore();  const { filter, changeFilter } = todoListStore;    return (    
     );}export default observer(TodoFooter);

TodoListView 组件

import TodoHeader from './TodoHeader';import TodoFooter from './TodoFooter';import TodoView from './TodoView';import { observer } from 'mobx-react-lite';import { useTodoListStore } from '../../stores/TodoStore/TodoListStore';function TodoListView() {  const todoListStore = useTodoListStore();  return (    
   
      
          
    
        
      {            const allTodos = todoListStore.filterTodos;            allTodos.forEach(todo => todo.completed = !todo.completed);          }}        />        
     
                {todoListStore.filterTodos.map(todo => (            
                ))}        
     
      
    
      
        
   
  );}export default observer(TodoListView);

4. 组件优化

TodoView 组件

import { observer } from 'mobx-react-lite';import { useTodoListStore } from '../../stores/TodoStore/TodoListStore';function TodoView({ todo }) {  const todoListStore = useTodoListStore();    return (    
       todo.toggle()}      />      {todo.title}       todoListStore.deleteTodo(todo.id)}      />    
  );}export default observer(TodoView);

5. 高级功能

计算属性优化

// TodoListStorecomputed unCompletedTodoCount() {  return this.filterTodos.length;}

清空功能

// TodoListStoreclear() {  this.todos = [];}

过滤优化

// TodoListStorechangeFilter(filter) {  this.filter = filter;}

这个优化方案涵盖了从基础状态管理到高级功能实现的完整流程，适用于实际项目中的待办事项管理系统。