📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 14: Plugins Pinia & Persistência

Especialização em Frontend com Vue.js

---

🗺️ O Ciclo de Vida de um Plugin do Pinia

sequenceDiagram
    autonumber
    actor A as App Vue
    participant P as Pinia Core
    participant PL as Plugin Persistência
    participant LS as LocalStorage / Cookie

    A->>P: pinia.use(piniaPluginPersistedstate)
    P->>PL: Registra hook onEveryStoreCreated
    PL->>LS: Lê estado gravado anteriormente
    LS-->>P: Hidrata a store com dados locais!
    Note over A,P: Usuário altera store.itens
    P->>PL: Dispara store.$subscribe()
    PL->>LS: Salva JSON atualizado de forma transparente!

---

🎯 Slide 1: Persistência Automática em Uma Linha

export const useAuthStore = defineStore('auth', () => {
  const token = ref<string | null>(null);
  const usuario = ref<Usuario | null>(null);

  return { token, usuario };
}, {
  persist: true // Salva e sincroniza automaticamente no localStorage!
});

---

🎯 Slide 2: Reset de Estado em Setup Stores

function $reset() {
  itens.value = [];
  filtro.value = '';
}

• Setup stores exigem que você defina sua própria função $reset para restaurar o estado padrão do aplicativo.

---

🎯 Slide 3: Interceptando Actions com store.$onAction()

• Permite registrar logs analíticos e monitoramento de erros centralizado (ex.: Sentry) para qualquer ação disparada na aplicação.

---

🔗 Navegação do Capítulo 14

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim