How to share a store between 2 SSR svelte apps
March 21, 2021 ~ 2 min read
By default, when you have 2 Svelte apps that are server-side rendered, they won’t share a store. So let’s take a look into how to solve this.
Basket example:
<!--Basket.Svelte-->
<script>
import { store } from './store.js'
</script>
{#if $store.showBasket}
<div id="overlay" on:click="{() => $store.showBasket = !$store.showBasket}"></div>
<div id="shopping-basket"></div>
{/if}
<!--BasketButton.Svelte-->
<script>
import { store } from './store.js'
</script>
<button on:click="{() => $store.showBasket = !$store.showBasket}">
The button
</button>
We want both of the apps to have control over when to display the basket.
- When clicking the overlay of the basket
- When clicking the button
Here’s how to make it work:
// store.js
import { writable } from 'svelte/store'
function createStore() {
return writable({showBasket: false})
}
function getStore() {
if (typeof window === 'undefined') return createStore()
window.store = window.store || createStore()
return window.store
}
export const store = getStore()
We get the store from the window, and if it doesn’t exist we create a new store and attach it to the window.