Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 21:55:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: useState improvements (#1973)

Browse Source
This commit is contained in:
Sébastien Chopin 2021-11-16 17:12:36 +01:00 committed by GitHub
parent 496ea09777
commit 07ba36d721
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
docs/content/3.docs/1.usage/2.state.md
View File

@ -1,22 +1,13 @@
# State
Nuxt provides `useState` to create a globally shared state within the context.
Nuxt provides `useState` composable to create a reactive and ssr-friendly shared state across components.
`useState` is SSR-friendly `ref` replacement in that its value will be hydrated (preserved) after server-side rendering and is shared across all components using a unique key.
`useState` is a SSR-friendly [`ref`](https://v3.vuejs.org/api/refs-api.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
::alert{icon=⚠️}
Never define `const state = ref()` outside of `<script setup>` or `setup()` function.
Such state will be shared across all users visiting your website and can lead to memory leaks!
## Signature
✅ Instead use `const useX = () => useState('x')`
::
## Usage
Within your pages, components and plugins you can use `useState`.
```js
const state = useState<T>(key: string, init?: () => T): Ref<T>
```ts
useState<T>(key: string, init?: () => T): Ref<T>
```
* **key**: A unique key ensuring that data fetching can be properly de-duplicated across requests
@ -24,7 +15,17 @@ const state = useState<T>(key: string, init?: () => T): Ref<T>
* **T**: (typescript only) Specify type of state
::alert{icon=👉}
**`useState` only works during `setup` or `Lifecycle Hooks`**
`useState` only works during `setup` or [`Lifecycle Hooks`](https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks).
::
## Best practices
::alert{type=danger icon=🚨}
Never define `const state = ref()` outside of `<script setup>` or `setup()` function.<br>
Such state will be shared across all users visiting your website and can lead to memory leaks!
::
::alert{type=success icon=✅}
Instead use `const useX = () => useState('x')`
::
## Examples
@ -53,13 +54,13 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?terminal=dev" blank}
### Advanced Example
### Advanced
In this example, we use a composable that detects the user's default locale and keeps it in a `locale` state.
In this example, we use a composable that detects the user's default locale from the request HTTP headers and keeps in `locale` state.
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/locale?terminal=dev" blank}
## Shared State
## Shared state
By using [auto-imported composables](/docs/directory-structure/composables) we can define global type-safe states and import them across the app.
@ -74,6 +75,6 @@ const color = useColor() // Same as useState('color')
</script>
<template>
Current color: {{ color }}
<p>Current color: {{ color }}</p>
</template>
```