Skip to content

Commit 6373641

Browse files
authored
docs: add example to "state instead of stores" (#14310)
closes #13879
1 parent e379319 commit 6373641

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

documentation/docs/06-runtime/01-stores.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r
3838
- 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)
3939
- when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
4040

41+
```ts
42+
/// file: state.svelte.js
43+
export const userState = $state({
44+
name: 'name',
45+
/* ... */
46+
});
47+
```
48+
49+
```svelte
50+
<!--- file: App.svelte --->
51+
<script>
52+
import { userState } from './state.svelte';
53+
</script>
54+
55+
<p>User name: {userState.name}</p>
56+
<button onclick={() => {
57+
userState.name = 'new name';
58+
}}>
59+
change name
60+
</button>
61+
```
62+
4163
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.
4264

4365
## svelte/store

0 commit comments

Comments
 (0)