0Pricing
Vue Academy · Aula

Persistência do Pinia e DevTools

pinia-plugin-persistedstate, persistência apenas de campos específicos e viagem no tempo com os DevTools do Pinia.

Persistência do Pinia e DevTools é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Persistência do estado dos módulos

Por padrão, o estado do Pinia é perdido ao recarregar a página. Para mantê-lo, use o plugin pinia-plugin-persistedstate, que sincroniza o estado com localStorage ou sessionStorage.

Instalando o plugin

Registre o plugin na instância do Pinia uma única vez. Depois, cada módulo de estado poderá optar por usá-lo.

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

Ativando a persistência em um módulo de estado

Defina persist: true nas opções do módulo de estado. Agora, todo o estado será salvo e restaurado automaticamente.

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

Escolhendo o armazenamento

A opção storage escolhe onde salvar. Use sessionStorage para dados que devem ser apagados quando a aba for fechada.

persist: {
  storage: sessionStorage
}

Persistindo apenas alguns campos

A opção paths limita quais chaves do estado serão salvas. Isso é ideal para manter um token, mas não indicadores temporários da interface.

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

Serialização do estado

A persistência funciona serializando o estado para JSON. Os valores precisam ser compatíveis com JSON — objetos simples, matrizes, strings e números. Funções, Maps e instâncias de classes precisam de um serializador personalizado.

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Ferramentas de desenvolvimento do Pinia

Com o Vue Devtools instalado, o Pinia adiciona um painel dedicado. Você pode inspecionar cada módulo de estado, acompanhar as mudanças no estado em tempo real e editar valores diretamente.

Depuração com viagem no tempo

Cada ação aparece na linha do tempo das ferramentas de desenvolvimento. Você pode fazer uma viagem no tempo: voltar a um estado anterior para reproduzir um erro e depois avançar novamente.

SSR e hidratação do estado

Na renderização no lado do servidor, o servidor preenche o estado e, depois, o cliente precisa hidratá-lo com os mesmos dados para que a marcação seja correspondente. Um estado diferente causa avisos de hidratação.

Pinia com Nuxt

O módulo @pinia/nuxt integra o Pinia ao Nuxt e cuida automaticamente da hidratação de SSR. O estado preenchido durante a renderização no servidor é serializado na página e restaurado no cliente.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Combinando persistência com SSR

Tenha cuidado: localStorage não existe no servidor. Os plugins de persistência detectam isso e são executados apenas no cliente; assim, a hidratação de SSR usa o estado do servidor e as camadas de persistência são aplicadas depois.

Verificação rápida

Teste seus conhecimentos sobre persistência e ferramentas de desenvolvimento.

Recapitulação

Você aprendeu sobre persistência e ferramentas:

  • pinia-plugin-persistedstate salva o estado no armazenamento local ou de sessão.
  • As opções de armazenamento e caminhos controlam onde e o que é salvo.
  • O estado é serializado para JSON, portanto os valores precisam ser compatíveis com JSON.
  • As ferramentas de desenvolvimento oferecem inspeção em tempo real e viagem no tempo; @pinia/nuxt cuida da hidratação de SSR.

Perguntas Frequentes

A aula “Persistência do Pinia e DevTools” é grátis?

Sim — o texto completo de “Persistência do Pinia e DevTools” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Persistência do Pinia e DevTools”?

pinia-plugin-persistedstate, persistência apenas de campos específicos e viagem no tempo com os DevTools do Pinia. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Persistência do Pinia e DevTools”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Pinia vs Vuex: por que mudar
  2. defineStore: estado, getters e ações
  3. Composição de stores e acesso entre stores
  4. Persistência do Pinia e DevTools
← Voltar para Vue Academy