d77b62d63e
Co-authored-by: pooya parsa <pyapar@gmail.com> Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> Co-authored-by: Alwin Lohrie <46248939+niwla23@users.noreply.github.com>
2.3 KiB
State Management
Nuxt provides useState composable to create a reactive and SSR-friendly shared state across components.
useState is an SSR-friendly ref replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
::ReadMore{link="/api/composables/use-state"} ::
::alert{icon=👉}
useState only works during setup or Lifecycle Hooks.
::
::alert{type=warning}
Because the data inside useState will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
::
Best practices
::alert{type=danger 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!
::
::alert{type=success icon=✅}
Instead use const useX = () => useState('x')
::
Examples
Basic usage
In this example, we use a component-local counter state. Any other component that uses useState('counter') shares the same reactive state.
<script setup>
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>
<template>
<div>
Counter: {{ counter }}
<button @click="counter++">
+
</button>
<button @click="counter--">
-
</button>
</div>
</template>
:LinkExample{link="/examples/composables/use-state"}
::ReadMore{link="/api/composables/use-state"} ::
Advanced
In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a locale state.
:LinkExample{link="/examples/other/locale"}
Shared state
By using auto-imported composables we can define global type-safe states and import them across the app.
export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')
<script setup>
const color = useColor() // Same as useState('color')
</script>
<template>
<p>Current color: {{ color }}</p>
</template>