How to Manage State Across Different Components in Svelte

How to Manage State Across Different Components in Svelte

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

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:

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

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.
How to Manage 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.