@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r
- 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
```ts
/// file: state.svelte.js
export const userState = $state({
name: 'name',
/* ... */
});
```
```svelte
<!--- file: App.svelte --->
<script>
import { userState } from './state.svelte';
</script>
<p>User name: {userState.name}</p>
<buttononclick={()=> {
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.