How to Combine Stores Together in Svelte

How to Combine Stores Together in Svelte

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

In Svelte, you can use a derived store, if you want a store to have a value based on other stores. This way, you can combine multiple stores together.

Copied to clipboard!
<script>
    import { writable, get, derived } from 'svelte/store'
	
    const vegetables = writable(['πŸ₯•', 'πŸ₯’', 'πŸ₯”']);
    const fruits     = writable(['πŸ₯', 'πŸ“', 'πŸ…']);
	
    const derivedFood = derived([vegetables, fruits], ($values, set) => {
        set([...$values[0], ...$values[1]]);
    });

    const set = () => fruits.set(get(fruits).concat(β€˜πŸŠβ€™))
	
    // fruits has changed but this will still log out
    // [β€œπŸ₯•β€, β€œπŸ₯’”, β€œπŸ₯””, β€œπŸ₯β€, β€œπŸ“β€, β€œπŸ…β€, β€œπŸŠβ€]
    derivedFood.subscribe(value => console.log(value));
</script>

<button on:click={set}>Add fruit</button>
Store.svelte

When one of the store's value changes, the derive store can be notified through a subscribe method.

How to Combine Stores Together 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.