Example 7: State Management

📊 Interactive Counter

A simple counter demonstrating reactive state updates:

0

Counter Value

0

Total Clicks

0

State Changes

Current State:

{}

👤 User Profile Store

Manage user profile with persistent state:

Profile State:

{}

💾 This store persists to localStorage. Try refreshing the page!

📋 Event Log

All state changes are logged here:

Waiting for state changes...

How It Works

Key Concepts:

Proxy: Intercepts state changes automatically
EventTarget: Native event system for subscriptions
Custom Events: Notify subscribers of changes
LocalStorage: Persist state across sessions

Code Example:

// Create a reactive store
const store = createStore({ count: 0 });

// Subscribe to all changes
store.subscribe((e) => {
  console.log('State changed:', e.detail);
});

// Watch specific property
store.watch('count', (e) => {
  console.log('Count:', e.detail.value);
});

// Update state (triggers events)
store.state.count = 5;