docs: add example to "state instead of stores" (#14310)

closes #13879
pull/14317/head
Simon H 1 day ago committed by GitHub
parent e379319626
commit 6373641045
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -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>
<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.
## svelte/store

Loading…
Cancel
Save