| I think it is useful to say the blog post is using svelte 4, and the svelte 5 docs mention: “When to use stores Prior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have greatly diminished. when extracting logic, it’s better to take advantage of runes’ universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a .svelte.js or .svelte.ts file ending)
when creating shared state, you can create a $state object containing the values you need and then manipulate said state
state.svelte export const userState = $state({
name: 'name',
/* ... */
});
App <script lang="ts">
import { userState } from './state.svelte.js';
</script> <p>User name: {userState.name}</p>
<button onclick={() => {
userState.name = 'new name';
}}>
change name
</button> Stores are still a good solution when you have complex asynchronous data streams or it’s important to have more manual control over updating values or listening to changes. If you’re familiar with RxJs and want to reuse that knowledge, the $ also comes in handy for you.” https://svelte.dev/docs/svelte/stores#When-to-use-stores |