How do I manage state in a Svelte application?

How do I manage state in a Svelte application?

In Svelte, you can manage state using reactive variables, stores, or context API. What specific aspect are you interested in?

Can you explain how to use stores for state management?

Sure! Svelte stores are a way to manage state that can be shared across components. You create a store using writable or readable from 'svelte/store'. Would you like a code example?

Yes, please provide a code example of a writable store.

Here's a simple example:

import { writable } from 'svelte/store';

const count = writable(0);

function increment() {
    count.update(n => n + 1);
}

This creates a store called count that starts at 0 and has an increment function to update it.

How do I use this store in a Svelte component?

You can use the store in a component by importing it and using the $ syntax to subscribe to its value. For example:

<script>
    import { count } from './store.js';
</script>

<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>