Use Svelte 3 stores to share data between multiple unrelated components
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.