mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 10:04:05 +00:00
e609f9f542
Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: pooya parsa <pyapar@gmail.com>
44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
# State
|
|
|
|
Nuxt provides `useState` to create a globally shared state.
|
|
|
|
## `useState`
|
|
|
|
Within your pages, components and plugins you can use `useState`. It can be used to create your own store implementation.
|
|
|
|
You can think of it as an SSR-friendly ref in that its value will be hydrated (preserved) after server-side rendering. It is shared across all components.
|
|
|
|
### Usage
|
|
|
|
```js
|
|
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
|
|
|
|
### Example
|
|
|
|
In this example, we use a server-only plugin to find about request locale.
|
|
|
|
```ts [plugins/locale.server.ts]
|
|
import { defineNuxtPlugin, useState } from '#app'
|
|
|
|
export default defineNuxtPlugin((nuxt) => {
|
|
const locale = useState(
|
|
'locale',
|
|
() => nuxt.ssrContext.req.headers['accept-language']?.split(',')[0]
|
|
)
|
|
})
|
|
```
|
|
|
|
```vue
|
|
<script setup>
|
|
const locale = useState('locale')
|
|
</script>
|
|
|
|
<template>
|
|
Current locale: {{ locale }}
|
|
</template>
|
|
```
|