Natuurlijk! Hier is een stapsgewijze gids om een Svelte-project genaamd **ShopMaster** op te zetten met een effectieve state management oplossing, gericht op het delen van globale state zonder prop drilling, met gebruik van Svelte stores en de context API. --- ### 1. Project opzetten Gebruik de Svelte template via de command line: ```bash npx degit sveltejs/template shopmaster cd shopmaster npm install ``` ### 2. Globale state beheren met Svelte Stores De eenvoudigste en meest gebruikte manier in Svelte voor globale state is via **stores**. Hier kun je verschillende soorten stores gebruiken, zoals `writable`, `readable`, of `derived`. --- ### 3. Voorbeeld: Een winkelwagen (cart) store maken Maak een nieuwe file aan: `src/stores/cart.js` ```js import { writable } from 'svelte/store'; export const cart = writable([]); // Een array van producten ``` **Gebruik in een component:** ```svelte <script> import { cart } from '../stores/cart.js'; // Voeg een product toe aan de cart function addProduct(product) { cart.update(items => { return [...items, product]; }); } </script> <button on:click={() => addProduct({ id: 1, name: 'Product A', price: 10 })}> Voeg Product A toe </button> ``` **En in een andere component:** ```svelte <script> import { cart } from '../stores/cart.js'; $: totalItems = $cart.length; </script> <p>Aantal items in winkelwagen: {$cart.length}</p> ``` --- ### 4. Context API gebruiken voor deep component-hierarchieën Soms wil je een store of data beschikbaar maken voor meerdere componenten zonder het via props door te geven. Hiervoor kun je Svelte's `setContext` en `getContext` gebruiken. **Voorbeeld:** In een bovenliggende component (bijvoorbeeld `App.svelte`): ```svelte <script> import { setContext } from 'svelte'; import { cart } from './stores/cart.js'; setContext('cart', cart); </script> <slot></slot> ``` In een dieper genest component: ```svelte <script> import { getContext } from 'svelte'; const cart = getContext('cart'); $: totalItems = $cart.length; </script> <p>Winkelwagen bevat {$cart.length} items</p> ``` --- ### 5. Samenvatting - Gebruik **Svelte stores** (`writable`) voor eenvoudige en efficiënte globale state management. - Gebruik **context API** (`setContext` en `getContext`) voor het delen van state of functies in complexe componenthiërarchieën zonder prop drilling. - Combineer beide methoden afhankelijk van je behoeften. --- ### 6. Aanbevelingen - Voor grotere projecten kun je overwegen om een state management library zoals **Svelte's eigen stores** of **Svelte Easy State** te gebruiken. - Organiseer je stores overzichtelijk in een `src/stores/`-map. - Gebruik `derived` stores voor berekeningen op basis van andere stores. --- Wil je dat ik een volledige voorbeeldstructuur voor jouw **ShopMaster** project opzet, inclusief meerdere stores en componenten?

Hier is hoe je een nieuw Svelte-project opzet met effectieve state management voor ShopMaster: ## Project opzetten ```bash npm create svelte@latest shopmaster cd shopmaster npm install npm run dev ``` ## State Management met Svelte Stores ### 1. Globale Store aanmaken (stores.js) ```javascript // src/stores.js import { writable, derived } from 'svelte/store'; // Basis writable store voor producten export const products = writable([]); // Writable store voor winkelwagen export const cart = writable([]); // Derived store voor totaalprijs export const cartTotal = derived(cart, $cart => { return $cart.reduce((total, item) => total + (item.price * item.quantity), 0); }); // Writable store voor gebruikersgegevens export const user = writable(null); // Functies voor state manipulatie export const addToCart = (product) => { cart.update(items => { const existingItem = items.find(item => item.id === product.id); if (existingItem) { return items.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ); } return [...items, { ...product, quantity: 1 }]; }); }; export const removeFromCart = (productId) => { cart.update(items => items.filter(item => item.id !== productId)); }; ``` ### 2. Gebruik in Componenten **ProductComponent.svelte:** ```svelte <script> import { addToCart } from '../stores.js'; export let product; </script> <div class="product"> <h3>{product.name}</h3> <p>€{product.price}</p> <button on:click={() => addToCart(product)}> In winkelwagen </button> </div> ``` **CartComponent.svelte:** ```svelte <script> import { cart, cartTotal, removeFromCart } from '../stores.js'; </script> <div class="cart"> <h2>Winkelwagen</h2> {#each $cart as item} <div class="cart-item"> <span>{item.name} x{item.quantity}</span> <span>€{item.price * item.quantity}</span> <button on:click={() => removeFromCart(item.id)}> Verwijderen </button> </div> {/each} <div class="total"> Totaal: €{$cartTotal} </div> </div> ``` ### 3. Context API voor lokale state **ParentComponent.svelte:** ```svelte <script> import { setContext } from 'svelte'; import ChildComponent from './ChildComponent.svelte'; // Lokale state voor parent let parentState = 'ShopMaster Data'; // Deel state via context setContext('parentData', parentState); </script> <div> <h1>Parent Component</h1> <ChildComponent /> </div> ``` **ChildComponent.svelte:** ```svelte <script> import { getContext } from 'svelte'; // Haal state op uit context const parentData = getContext('parentData'); </script> <div> <h2>Child Component</h2> <p>Data van parent: {parentData}</p> </div> ``` ## Projectstructuur ``` shopmaster/ ├── src/