How to Read State Across Different Components in Svelte

How to Read State Across Different Components in Svelte

Ferenc Almasi β€’ 2020 October 18 β€’ Read time 1 min read
  • twitter
  • facebook

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:

Copied to clipboard!
<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>
Store.svelte

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.
How to Read State Across Different Components in Svelte
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.