Back to Snippets
State Management
Complex

Versioned Persistent State with Migration (localStorage + Cross-Tab Sync)

Persist user state safely with versioning, validation, and migration. This prevents breaking changes when the stored schema evolves. It also syncs updates across tabs via the storage event. Use cases: User preferences, filters/sort state, onboarding flags, feature settings.

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

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;