Back to Snippets
State Management
Complex

Async Request State Machine (Reducer Pattern, Race-Safe)

Model async data fetching as a typed state machine to avoid ambiguous UI states and race conditions. The reducer pattern makes transitions explicit (idle -> loading -> success/error), supports cancel, and ignores out-of-order responses via requestId. This scales well in enterprise apps with complex async flows. Use cases: Search results, dashboard refresh, paginated lists, retry/cancel patterns.

Vue 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

Related Snippets

State Management
Complex

Global State Management (Pinia / React Context API)

Implement global state management for enterprise applications with strict TypeScript typing. Vue uses Pinia (of...

// stores/authStore.ts (Pinia store - separate file for enterprise structure)
  import { defineStore } from 'pinia';
  import { ref, computed } from 'vue';
  
  // Typed user state
  interface User {
    id: number;
    name: string;
State Management
Complex

Undo/Redo State History for Text Editing (Bounded History)

Implement a bounded undo/redo history for user-editable state. This pattern stores past/present/future snapshots, pr...

<script setup lang="ts">
  import { computed, ref } from 'vue';
  
  interface HistoryState<T> {
    past: T[];
    present: T;
    future: T[];
    max: number;
State Management
Complex

Normalized Entity Store (byId + allIds) with Selectors

Manage large collections efficiently by normalizing state into a dictionary (byId) plus an ID list. This prevents ex...

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue';
  
  type TaskId = string;
  
  interface Task {
    id: TaskId;
    title: string;