|
1 | 1 | --- |
2 | | -description: 实现 MobX stores 进行应用程序状态管理的指导原则。 |
| 2 | +description: "实现 MobX stores 进行应用程序状态管理的指导原则" |
3 | 3 | globs: src/stores/**/*.ts |
4 | 4 | --- |
5 | | -- 实现 stores 来管理应用程序状态。 |
6 | | -- 利用计算值处理派生状态。 |
7 | | -- 使用 actions 修改可观察状态。 |
8 | | -- 在异步 actions 中实现适当的错误处理。 |
| 5 | +- **实现 stores 来管理应用程序状态**： |
| 6 | + - **定义可观察状态**： |
| 7 | + - 使用 `@observable` 或 `makeObservable` 定义 store 中需要响应式跟踪的状态。 |
| 8 | + - 示例： |
| 9 | + ```typescript |
| 10 | + import { makeObservable, observable, action, computed } from 'mobx'; |
| 11 | + |
| 12 | + class TodoStore { |
| 13 | + @observable todos = []; |
| 14 | + @observable isLoading = false; |
| 15 | + @observable error = null; |
| 16 | + |
| 17 | + constructor() { |
| 18 | + makeObservable(this); |
| 19 | + } |
| 20 | + |
| 21 | + // ... actions and computed values |
| 22 | + } |
| 23 | + ``` |
| 24 | + - **利用计算值（`@computed`）处理派生状态**： |
| 25 | + - 对于可以从现有可观察状态派生出的数据，使用 `@computed` 属性。它们是惰性求值的，并且只有在依赖的可观察数据发生变化时才会重新计算。 |
| 26 | + - 示例： |
| 27 | + ```typescript |
| 28 | + class TodoStore { |
| 29 | + // ... |
| 30 | + @computed |
| 31 | + get completedTodosCount() { |
| 32 | + return this.todos.filter(todo => todo.completed).length; |
| 33 | + } |
| 34 | + |
| 35 | + @computed |
| 36 | + get uncompletedTodos() { |
| 37 | + return this.todos.filter(todo => !todo.completed); |
| 38 | + } |
| 39 | + } |
| 40 | + ``` |
| 41 | + - **使用动作（`@action`）修改可观察状态**： |
| 42 | + - 所有修改 MobX store 可观察状态的函数都应该用 `@action` 标记。这有助于 MobX 批量更新，提高性能，并使调试更容易。 |
| 43 | + - 示例： |
| 44 | + ```typescript |
| 45 | + class TodoStore { |
| 46 | + // ... |
| 47 | + @action |
| 48 | + addTodo(text: string) { |
| 49 | + this.todos.push({ id: Date.now(), text, completed: false }); |
| 50 | + } |
| 51 | + |
| 52 | + @action |
| 53 | + toggleTodo(id: number) { |
| 54 | + const todo = this.todos.find(t => t.id === id); |
| 55 | + if (todo) { |
| 56 | + todo.completed = !todo.completed; |
| 57 | + } |
| 58 | + } |
| 59 | + } |
| 60 | + ``` |
| 61 | + - **在异步 actions 中实现适当的错误处理**： |
| 62 | + - 对于异步操作（如 API 调用），应在 action 中处理加载状态、成功和失败情况，并捕获错误。 |
| 63 | + - 示例： |
| 64 | + ```typescript |
| 65 | + class TodoStore { |
| 66 | + // ... |
| 67 | + @action |
| 68 | + async fetchTodos() { |
| 69 | + this.isLoading = true; |
| 70 | + this.error = null; |
| 71 | + try { |
| 72 | + // 模拟 API 调用 |
| 73 | + const response = await new Promise(resolve => |
| 74 | + setTimeout(() => resolve([{ id: 1, text: 'Learn MobX', completed: false }]), 1000) |
| 75 | + ); |
| 76 | + this.todos = response; |
| 77 | + } catch (e) { |
| 78 | + this.error = e; |
| 79 | + } finally { |
| 80 | + this.isLoading = false; |
| 81 | + } |
| 82 | + } |
| 83 | + } |
| 84 | + ``` |
| 85 | + - **Store 的组合**： |
| 86 | + - 对于大型应用，可以将多个相关的 store 组合成一个根 store，方便统一管理和访问。 |
| 87 | + - 示例： |
| 88 | + ```typescript |
| 89 | + // RootStore.ts |
| 90 | + import { makeObservable, observable } from 'mobx'; |
| 91 | + import { TodoStore } from './TodoStore'; |
| 92 | + import { UserStore } from './UserStore'; |
| 93 | + |
| 94 | + export class RootStore { |
| 95 | + @observable todoStore: TodoStore; |
| 96 | + @observable userStore: UserStore; |
| 97 | + |
| 98 | + constructor() { |
| 99 | + makeObservable(this); |
| 100 | + this.todoStore = new TodoStore(); |
| 101 | + this.userStore = new UserStore(); |
| 102 | + } |
| 103 | + } |
| 104 | + ``` |
0 commit comments