Back to 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 (official Vue 3 state management library); React uses Context API + useReducer (no external dependencies). Key features: - Typed global state (user auth, theme) - Immutable state updates (React) - Reusable actions/mutations - Global state consumption in components - Persistence (localStorage) for auth state Use cases: User authentication, app theme, global notifications.

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

Related 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 pat...

<script setup lang="ts">
  import { computed, onUnmounted, ref } from 'vue';
  
  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;