mobx_todo_store_with_observable_computed_actions.ts

1import { makeAutoObservable } from "mobx"
2
3// Model the application state.
4class TodoStore {
5    todos: { title: string; completed: boolean }[] = []
6
7    constructor() {
8        makeAutoObservable(this)
9    }
10
11    get completedTodosCount() {
12        return this.todos.filter(todo => todo.completed).length
13    }
14
15    addTodo(title: string) {
16        this.todos.push({
17            title,
18            completed: false
19        })
20    }
21
22    toggleTodo(index: number) {
23        this.todos[index].completed = !this.todos[index].completed
24    }
25}
26
27const store = new TodoStore()
28
29// Usage/Testing the store
30store.addTodo("Get Coffee")
31store.addTodo("Write Code")
32store.toggleTodo(0)
33
34console.log("Completed count:", store.completedTodosCount)