How to Manage State Across Different Components in Svelte

You can use a writable store in Svelte to manage state across different components. A store is an object that is enhanced with methods that you can use to read, write, and listen to changes in it:

<script>
    import { writable } from 'svelte/store';

    const stores = writable([]);
    
    // logs out []
    stores.subscribe(value => console.log(value));

    // logs out: [‘🏪’]
    stores.set(['🏪']);
    
    // logs out: [‘🏪’, ‘🏬’]
    stores.update(stores => [...stores, '🏬']);
</script>

Writable stores have the following methods:

• subscribe: Subscribes to the store and listen for changes. The callback is called with the value whenever the store is changed.
• set: Sets the store to a given value.
• update: Updates the store using a callback function.

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The writable store in Svelte