new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · API · all subjects

composables: state management

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useState composable basic usage and signature

The useState composable creates a reactive, SSR-friendly shared state across components. It takes a unique key as the first parameter and an optional initializer function as the second parameter. Example: const counter = useState('counter', () => Math.round(Math.random() * 1000)). The state is shared across all components using the same key and persists through server-side rendering and hydration.

useState is SSR-friendly ref replacement

useState is an SSR-friendly replacement for ref. Its value is preserved after server-side rendering during client-side hydration and shared across all components using a unique key.

useState serialization constraint

The data inside useState will be serialized to JSON, so it must not contain anything that cannot be serialized, such as classes, functions, or symbols.

useState best practice: never use ref outside setup

Never define const state = ref() outside of <script setup> or setup() function. For example, export myState = ref({}) would result in state shared across requests on the server and can lead to memory leaks. Instead, use const useX = () => useState('x') pattern.

useState initializing state with async data

To initialize state with data that resolves asynchronously, use the app.vue component with the callOnce util. Example: const websiteConfig = useState('config'); await callOnce(async () => { websiteConfig.value = await $fetch('https://my-cms.com/api/website-config') }).

useState with auto-imported composables for shared state

Use auto-imported composables to define global type-safe states that can be imported across the app. Pattern: export const useColor = () => useState<string>('color', () => 'pink'). Then import and use useColor() in components to access the same shared state.

clearNuxtState for invalidating cached state

Use the clearNuxtState utility to globally invalidate cached state.

Pinia module integration for state management

Pinia can be used as a state management library with Nuxt. Install with: npx nuxt module add pinia. Define stores using defineStore('storeName', { state: () => ({}), actions: {...} }) and use them with auto-imported composables like useWebsiteStore().

Give your agent this brain