What are Svelte Stores?

Svelte stores are a way to store and manage the state of your application. They are reactive, which means that when the state of the store changes, any component that is subscribed to that store will automatically update.

Creating a Svelte Store

To create a Svelte store, you can use the writable function from the svelte/store module. We generally write stores in a specific directory and file for the separation of concerns, and usually we do it in src/lib/stores/store.js if we wish to declare a global store which might be used by more than one page or server. Here is an example of how you can create a store that holds a count value:

import { writable } from "svelte/store";

export const count = writable(0);

In this example, we are creating a store called count that holds a count value of 0. The writable function returns an object with a subscribe method that allows you to subscribe to the store and a set method that allows you to update the value of the store.

Subscribing to a Svelte Store

To subscribe to a Svelte store, you can use the subscribe method that is returned by the writable function. Here is an example of how you can subscribe to the count store within the <script> tag of a Svelte component:

import { count } from "./store.js";

const unsubscribe = count.subscribe((value) => {
  console.log(value);
});

In this example, we are subscribing to the count store and logging the value of the store to the console. The subscribe method returns a function that you can call to unsubscribe from the store.

Updating a Svelte Store

To update the value of a Svelte store, you can use the set method that is returned by the writable function. Here is an example of how you can update the value of the count store:

import { count } from "./store.js";

count.update((value) => value + 1); // Increment the count value by 1

// OR

count.set(1); // Set the count value to 1

In this example, we are updating the value of the count store to 1. Any component that is subscribed to the count store will automatically update when the value of the store changes.

DO NOTE: The set method is synchronous, while the update method is asynchronous. The update method is useful when you need to update the value of the store based on its current value while the set method is useful when you need to set or rewrite the value of the store to a specific value.

Using Svelte Stores in a Svelte Component

To use a Svelte store in a Svelte component, you can import the store and subscribe to it within the <script> tag of the component. Here is an example of how you can use the count store in a Svelte component:

<script>
  import { count } from "$lib/stores/store.js";

  let value;

  const unsubscribe = count.subscribe((v) => {
    value = v;
  });
</script>

<h1>{value}</h1>

<button on:click={() => count.update((v) => v + 1)}>Increment</button>

🔥 Pro Tip

You can use the $ prefix to automatically subscribe to a store in a Svelte component. Here is an example of how you can use the $ prefix to subscribe to the count store in a Svelte component:

<script>
  import { count } from "$lib/stores/store.js";
</script>

<h1>{$count}</h1>

<button on:click={() => count.update((v) => v + 1)}>Increment</button>

Conclusion

Svelte stores are a powerful tool to manage the state of your application. They are reactive, which means that when the state of the store changes, any component that is subscribed to that store will automatically update. In this article, we learned how to create a Svelte store, subscribe to a Svelte store, and update a Svelte store. I hope you found this article helpful. Happy coding!