SvelteHow-ToBeginner · 3 min read

How to Use Store Across Components in Svelte

In Svelte, you can share state across components by creating a writable store in a separate file and importing it where needed. Components subscribe to the store to reactively update when the store's value changes.

📐

Syntax

To use a store across components, first import writable from svelte/store. Then create a store with writable(initialValue). Export this store from a module. In any component, import the store and use the $ prefix to subscribe reactively.

import { writable } from 'svelte/store': imports the writable store function.
const store = writable(value): creates a store with an initial value.
export { store }: makes the store available to other components.
$store: auto-subscribe to the store's value in components.

svelte

import { writable } from 'svelte/store';

export const count = writable(0);

// In a component
<script>
  import { count } from './store.js';
</script>

<p>Count is {$count}</p>

Output

Count is 0

💻

Example

This example shows two components sharing a count store. One component increments the count, and the other displays it. Both update reactively when the count changes.

svelte

// store.js
import { writable } from 'svelte/store';
export const count = writable(0);

// Incrementer.svelte
<script>
  import { count } from './store.js';
  function increment() {
    count.update(n => n + 1);
  }
</script>
<button on:click={increment}>Increment</button>

// Display.svelte
<script>
  import { count } from './store.js';
</script>
<p>Current count: {$count}</p>

// App.svelte
<script>
  import Incrementer from './Incrementer.svelte';
  import Display from './Display.svelte';
</script>
<main>
  <Incrementer />
  <Display />
</main>

Output

Button labeled 'Increment' and text 'Current count: 0' initially; clicking button updates count text

⚠️

Common Pitfalls

Common mistakes include:

Not exporting the store from its module, so other components cannot import it.
Using the store variable directly without the $ prefix in markup, which prevents reactive updates.
Creating a new store instance inside each component instead of sharing one exported store.

Always create and export the store once, then import and use $store in components.

svelte

// Wrong: creating store inside component
<script>
  import { writable } from 'svelte/store';
  const count = writable(0); // new store each time
</script>
<p>Count is {$count}</p>

// Right: import shared store
<script>
  import { count } from './store.js';
</script>
<p>Count is {$count}</p>

Output

Count is 0

📊

Quick Reference

Concept	Usage	Notes
Create store	import { writable } from 'svelte/store'; const store = writable(initialValue);	Create once, export for sharing
Import store	import { store } from './store.js';	Use in any component needing shared state
Subscribe reactively	Use `{$store}` in markup or `$store` in script	Auto updates component on store changes
Update store	store.set(value) or store.update(fn)	Change store value to notify subscribers

✅

Key Takeaways

Create and export a writable store in a separate file to share state.

Import the store in components and use the $ prefix to subscribe reactively.

Update the store using set or update methods to change shared state.

Avoid creating new stores inside components; always share the exported store.

Reactive subscriptions with $store keep components in sync automatically.