# 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.

::alert{icon=👉}
**`useState` only works during `setup` or `Lifecycle Hooks`**
::

### 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>
```