Use Svelte 3 stores to share data between multiple unrelated components

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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

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.

egghead
egghead
~ 13 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today