nuxt logo

Tradução da Documentação

Version 33.17

useState

O composable useState cria um estado compartilhado reativo e amigável ao SSR.

Uso

// Cria um estado reativo e define um valor padrão
const count = useState('counter', () => Math.round(Math.random() * 100))
Veja também getting-started > state-management

Como os dados dentro de useState serão serializados para JSON, é importante que não contenham nada que não possa ser serializado, como classes, funções ou símbolos.

useState é um nome de função reservado transformado pelo compilador, então você não deve nomear sua própria função como useState.

Usando shallowRef

Se você não precisa que seu estado seja profundamente reativo, pode combinar useState com shallowRef. Isso pode melhorar o desempenho quando seu estado contém objetos e arrays grandes.

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

Tipo

useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
  • key: Uma chave única que garante que a busca de dados seja devidamente desduplicada entre as requisições. Se você não fornecer uma chave, então uma chave única para o arquivo e número da linha da instância de useState será gerada para você.
  • init: Uma função que fornece o valor inicial para o estado quando não iniciado. Esta função também pode retornar um Ref.
  • T: (apenas typescript) Especifica o tipo de estado

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/api/composables/use-state