🚀 Capítulo 16: Pinia - Gerenciamento Global

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o que é o Gerenciamento de Estado Global e saberá como usar a biblioteca Pinia (a biblioteca oficial e moderna do Vue) para compartilhar dados entre qualquer componente do seu projeto sem usar Props ou Emits.

---

🏢 O Cenário Prático (Seu Desafio)

O alarme de invasão da Base Rebelde precisa ser ouvido por todos os componentes! No entanto, o botão do alarme fica na cabine principal. Seu desafio é usar o Pinia para criar uma “Frequência de Rádio Global” onde qualquer componente possa ligar ou desligar o alarme!

---

🧠 Fundamentos: A Teoria Traduzida

Até agora, para passar dados entre componentes distantes, usávamos Props e Emits passando pelo pai. Isso fica impossível em projetos grandes.

O Pinia resolve isso criando uma Store (Loja de Dados). É como um banco de dados que fica flutuando acima de todos os componentes. Qualquer componente pode acessar ou mudar os dados lá dentro diretamente!

Uma Store do Pinia tem 3 partes principais (iguais a um componente):

1. State: Os dados (equivalente ao ref).
2. Getters: Valores calculados (equivalente ao computed).
3. Actions: Funções que mudam os dados (equivalente às funções comuns).

---

📖 Exemplo Guiado: Criando a Store do Alarme

Geralmente instalamos com npm install pinia. Vamos ver como criar a Store:

🛠️ Passo a Passo (Criando a Store)

Crie um arquivo chamado src/stores/alarme.js:

import { defineStore } from 'pinia';
import { ref } from 'vue';
 
// Definimos a store com um nome único 'alarme'
export const useAlarmeStore = defineStore('alarme', () => {
  // 1. State
  const alarmeAtivo = ref(false);
 
  // 2. Action
  function alternarAlarme() {
    alarmeAtivo.value = !alarmeAtivo.value;
  }
 
  return { alarmeAtivo, alternarAlarme };
});

🛠️ Passo a Passo (Usando no Componente)

Em qualquer componente (ex: Cabine.vue ou Motor.vue):

<template>
  <div :style="{ background: store.alarmeAtivo ? 'red' : 'gray' }">
    <h2>Status da Base</h2>
    <p>{{ store.alarmeAtivo ? '🚨 INVASÃO!' : 'Tudo calmo.' }}</p>
    
    <button @click="store.alternarAlarme">
      Gatilho do Alarme
    </button>
  </div>
</template>
 
<script setup>
import { useAlarmeStore } from '../stores/alarme';
 
// Instanciamos a store para usar
const store = useAlarmeStore();
</script>

🕹️ Como Executar e Testar no VS Code

1. Se você colocar esse componente em duas páginas diferentes, ao clicar no botão de uma, a outra também mudará de cor na mesma hora!

---

🛠️ Prática Obrigatória 1

Adicione um novo estado na store chamado nivelAlerta (iniciando em “Baixo”). Crie uma action para mudar esse nível.

---

🛠️ Prática Obrigatória 2

No componente, exiba o nivelAlerta e crie um botão para mudar o nível para “Alto”.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

Na store:

const nivelAlerta = ref('Baixo');
function setNivel(novoNivel) {
  nivelAlerta.value = novoNivel;
}
return { alarmeAtivo, alternarAlarme, nivelAlerta, setNivel };

---

← Capitulo Anterior | Proximo Capitulo →