Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use Svelte 3 stores to share data between multiple unrelated components

    Tomasz ŁakomyTomasz Łakomy
    sveltesvelte

    Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

    In Svelte, we do this with stores. In this lesson we're going to learn how to create a writable store and how to use it to allow Incrementer and Decrementer components modify the value of the store

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 Not all of the applications state belongs in the component hierarchy. Sometimes, you want to be able to share data between multiple unrelated components.

    0:07 In this example, we're going to have this countValue and we would like to be able to share this countValue between this incrementer and decrementer component to respectively increment and decrement their countValue.

    0:18 The way to achieve this effect in Svelte is to use store. First, create a new file and call it store.js. Over here, import {writable} from 'svelte/store.' We're going to create a new store, so export const store equals writable, because we would like to be able to write to the store and we're going to set the default value to zero.

    0:37 Next in the App.svelte, we're going to import the store. Import { store } from "./store" and next we need to subscribe to the store, so store.subscribe.

    0:47 Whenever the value of the store is going to change, I would like to set this countValue to be equal to the new value of the store. Let's see if it works.

    0:55 I am going to reset this default countValue. I am going to set default value of the store to be equal to five. Now, we can see that this countValue displayed over here is taken from the store.

    1:05 Now, let's move on to incrementic and decrementic value. Go to increment.svelte, and we're going to import store as well. Import { store } from "/store."

    1:14 Store also has an update function. We're going to do store.update. We're going to set the updater function, so whatever it was provided, we'd like to increment it by one. This increment function is going to be triggered whenever we click the button.

    1:25 Let's see if it works. There we go. We have the desired effect. I am going to copy and paste that into the decrementer. I am going to call this function decrement, and I am going to decrement the value by one.

    1:37 Now, both increment and decrement components are able to modify the variable store within the store without this value being passed in as a prop.