Exercícios: Aula 11 - Gerenciamento de Estado (Pinia) 🍍

1. Por que usar Pinia?

Cite uma situação em que o uso do Pinia (Gerenciamento de Estado Global) é preferível em relação ao uso de Props e Events. O que é o problema do "Prop Drilling"?

2. Criando uma Store

Crie uma store chamada useCounterStore usando o estilo Setup Store. - Defina um state (ref) chamado count. - Defina uma action (function) chamada increment. - Defina um getter (computed) chamado doubleCount que retorna o dobro do valor atual.

3. Consumindo a Store

Importe a store criada acima em um componente Vue. Exiba o valor de count e de doubleCount no template. Chame a action increment ao clicar em um botão.

4. Persistência de Estado

Como você faria para que os dados de uma Store do Pinia não fossem perdidos quando o usuário atualiza (F5) a página? Cite uma estratégia ou plugin que ajude nisso.

5. Desafio: Lista de Compras Global

Crie uma useCartStore que gerencie um array de produtos no carrinho. - Crie uma action para adicionar um produto ao array. - Crie um getter que calcule o valor total do carrinho (soma dos preços). - Crie dois componentes diferentes na página: um que adiciona itens e outro que exibe apenas o total acumulado, provando que ambos compartilham o mesmo estado.