mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-28 16:33:14 +00:00
83 lines
2.1 KiB
Markdown
83 lines
2.1 KiB
Markdown
# State
|
|
|
|
Nuxt provides `useState` to create a globally shared state within the context.
|
|
|
|
`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.
|
|
|
|
::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!
|
|
|
|
✅ 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>
|
|
```
|
|
|
|
* **key**: A unique key ensuring that data fetching can be properly de-duplicated across requests
|
|
* **init**: A function that provides initial value for the state when it's not initiated
|
|
* **T**: (typescript only) Specify type of state
|
|
|
|
::alert{icon=👉}
|
|
**`useState` only works during `setup` or `Lifecycle Hooks`**
|
|
::
|
|
|
|
## Shared State
|
|
|
|
Using [auto-imported composables](/docs/directory-structure/composables) we can define global type-safe states.
|
|
|
|
::code-group
|
|
|
|
```vue [app.vue]
|
|
<script setup>
|
|
const color = useColor() // Same as useState('color')
|
|
</script>
|
|
|
|
<template>
|
|
Current color: {{ color }}
|
|
</template>
|
|
|
|
```
|
|
|
|
```ts [composables/states.ts]
|
|
export const useColor = () => useState<string>('color', () => 'pink')
|
|
```
|
|
|
|
::
|
|
|
|
## Example
|
|
|
|
In this example, we use a [server-only plugin](/docs/directory-structure/plugins) to find about request locale.
|
|
|
|
::code-group
|
|
|
|
```vue [app.vue]
|
|
<script setup>
|
|
const locale = useLocale()
|
|
</script>
|
|
|
|
<template>
|
|
Current locale: {{ locale }}
|
|
</template>
|
|
```
|
|
|
|
```ts [composables/states.ts]
|
|
export const useLocale = () => useState<string>('locale', () => 'en')
|
|
```
|
|
|
|
```ts [plugins/locale.server.ts]
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
const locale = useLocale()
|
|
locale.value = locale.value ?? nuxtApp.ssrContext?.req.headers['accept-language']?.split(',')[0]
|
|
})
|
|
```
|
|
|
|
::
|
|
|
|
:button-link[Full example on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?terminal=dev" blank}
|