Svelte Stores Tutorial: Share Data Between Multiple Components

Since you found this article you’re probably familiar with reactive declarations in Svelte. But, did you know that there’s a way to get even more reactive in Svelte? You can even share data between Svelte components which aren’t related to each other. That’s right, using Svelte stores!

We’ll in this article explain everything you need to know about Svelte stores, what they are and examples of using them. Sound’s interesting? Then, continue reading.

Table of Contents

What Are Svelte Stores?

Svelte stores are regular JavaScript or TypeScript modules implementing functionality from the svelte/store library.

In contrast to sharing data between a parent and child component, Svelte stores enables you to share data between multiple Svelte components or JavaScript/TypeScript modules, even if they’re not hierarchically related.

The values inside a store can be accessible by subscribing to it’s observables. There’s also stores where you can update the values inside it using the set() method included in the svelte/store library or reactive statements. The four types of stores you can use in Svelte are:

Writable stores

Readable stores
Derived stores
Custom stores

Let’s go over each type of store in Svelte and show you when to use them.

Writable Stores

The most common type of store Svelte developers use is the writable store. I think the reason for this is because it is the easiest to implement and you can always extend it further by returning a method from the set() and update() methods.

With writable stores you can fetch the values inside the store and also set and update the values whenever you want.

A good use-case of a writable store is when you have an application with multiple components and you want to alert the user if something goes wrong. It is bad practice to duplicate code inside each component for alerting the user, a much better way is having a centralized service accessible by all components. We’ll solve this by using writable stores in Svelte.

Creating and Using a Writable Store

In order to create a writable store in Svelte you only need to import the writable class and define a variable of the type Writable<T>. You can do this with only two lines of code:

import { writable } from "svelte/store";
export const value = writable(0);

Here I have created a file, stores.js, which imports the writable store and exports the variable value of type Writable<number>. You can now subscribe to this store from other Svelte components in order to get the latest value of the variable value:

<script>
  import { value } from "./stores";

  setInterval(() => {
    value.set(Date.now());
  }, 500);
</script>

<p>Current value: {$value}</p>

Note that the setInterval() method will update the value in the store to the current date (in Unix Timestamp) every 500 milliseconds. I added this call to demonstrate that the value actually gets updated and displayed on the page by subscribing to it.

Here’s how it looks like when I run my Svelte application locally:

Readable Stores

In comparison to writable stores, which allows components to both read and write values, readable stores only allow components to read the values inside it. The only way to update the values inside a readable store is by doing it inside the store itself.

To create a readable store you pretty much do the same as with writable stores, except that instead of importing the writable class from svelte/store you import the readable class.

Creating and Using a Readable Store

Here is an example of the readable store, where we count the elapsed time in seconds and display it in App.svelte. Lets first define our readable store:

import { readable } from "svelte/store";
let counter = 0;
export const value = readable(0, function start(set) {
  setInterval(() => {
    set(counter++);
  }, 1000);
});

Notice that we call the set() method, as we did with the writable store. The difference here is now we’re calling the method from inside the store itself, since we aren’t allowed to call it from other components like we did with the writable store.

All we need to do know is subscribing to the value in our Svelte component and display the value:

<script>
  import { value } from "./readable-store.js";
</script>

<p>Current value: {$value}</p>

If you run your application you should get the following result:

Derived Stores

Derived stores are a bit special compared to writable and readable stores. The selling point of using derived stores are that they contain values which are derived from other stores.

An example of a derived store is an application which have a readable store for getting the current time and then utilizing a derived store to calculate how long the current page has been open for.

Creating and Using a Derived Store

We first create our readable store which will keep track of the current time for us:

import { readable } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

	return function stop() {
		clearInterval(interval);
	};
});

Now that we have our store which we can get the current time from, the next step is to calculate how long the page have been open for. To accomplish this we first save the DateTime for when the page opened and then we calculate the difference between that DateTime and the current DateTime, this gives us the session time:

import { derived } from "svelte/store";
import { time } from "./date-store";

const start = Date.now();
export const elapsed = derived(time, ($time) =>
  Math.round(($time - start) / 1000)
);

You can now import the stores to your App.svelte component and add a formatter for displaying the time:

<script>
  import { time } from "./date-store.js";
  import { elapsed } from "./session-store.js";

  const formatter = new Intl.DateTimeFormat("en", {
    hour12: false,
    hour: "numeric",
    minute: "2-digit",
    second: "2-digit",
  });
</script>

Everything is now setup and we can add a paragraph to display the values:

<p>
  The time is {formatter.format($time)} <br />
  This page has been open for {$elapsed}
  {$elapsed === 1 ? "second" : "seconds"}
</p>

If you followed this example and everything went well you should get the following result:

Custom Stores

We have now walked you through on how writable, readable and derived stores work. We could stop right here and you could still say that you now know what Svelte stores are and how to use them.

Custom stores are really just objects in Svelte implementing the subscribe() method. When creating custom stores you are often building them on top of either a writable, readable or derived store.

Creating and Using Custom Stores in Svelte

Below is an example of a custom store implemented as a writable store:

import { writable } from "svelte/store";

function createCustomStore() {
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    increaseValue: () => update((n) => n + 1),
    reset: () => set(0),
  };
}
export const customStore = createCustomStore();

This custom store implements the subscribe(), set() and update() methods as well as the custom method increaseValue().

In order to test out our custom store we can subscribe to the custom store, display the value and bind a button to the increaseValue() method in App.svelte:

<script>
  import { customStore } from "./custom-store";
</script>

<p>customStore value = {$customStore }</p>
<button on:click={customStore.increaseValue}>Increase value by 1</button>

You can now run your application and test it out by clicking on the button:

Conclusion

We have now walked you through all types of stores in Svelte. If you are interested in learning more ways of sharing data between your components in Svelte, you should check out our other article, How To Share Data Between Components In Svelte.

Svelte stores are a great way of sharing data between Svelte components, JavaScript modules and TypeScript modules. It is especially beneficial to use stores if you want to share data between components which are not hierarchically related.

Are you interested in developing a real-world application which uses Svelte stores? If so, you should really check out our tutorial on how to create a todo list app in Svelte using stores.