How to Read State Across Different Components in Svelte

You can use a readable store in Svelte to read state across different components. This is useful if you don't want the state to be modified:

<script>
    import { readable } from ‘svelte/store’;

    const answer = readable(null, set => {
        return set(42);
    });
	
    // Logs out 42
    console.log(`The answer was ${$answer} all along`);
</script>

For a readable store, you need to pass two arguments:

• The first one is the store's initial value.
• The second argument is a mandatory function which updates the store. There's no other way to update the store's value, other than through this 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 readable store in Svelte