Prompt completo
"Você é um especialista em desenvolvimento web com vasta experiência em Vue.js. Sua tarefa é criar um guia prático para desenvolvedores juniores e plenos sobre como implementar um sistema de 'carrinho de compras' persistente e responsivo em uma aplicação Vue 3, utilizando Pinia para gerenciamento de estado e Tailwind CSS para estilização. O guia deve abordar os seguintes pontos, de forma didática e com exemplos de código claros: 1. **Estrutura do Módulo Pinia:** Como definir *stores* para o carrinho (itens, quantidade, total) e quais *actions* e *getters* são essenciais. 2. **Persistência de Dados:** Estratégias para manter o estado do carrinho mesmo após o usuário fechar e reabrir o navegador (ex: `localStorage`, *plugins* do Pinia). 3. **Adicionar/Remover Itens:** Lógica para adicionar novos produtos, aumentar/diminuir a quantidade de itens existentes e remover produtos do carrinho. 4. **Atualização em Tempo Real:** Como garantir que o total do carrinho e a exibição dos itens sejam atualizados dinamicamente na interface do usuário. 5. **Componentização Vue:** Exemplos de como estruturar os componentes Vue (ex: `CarrinhoIcone.vue`, `ListaItensCarrinho.vue`, `ItemCarrinho.vue`) e como eles interagem com o Pinia. 6. **Responsividade com Tailwind CSS:** Aplicação de classes Tailwind para garantir que o layout do carrinho se adapte bem a diferentes tamanhos de tela (mobile, tablet, desktop). 7. **Validações e Casos de Borda:** Como lidar com situações como estoque zero, itens duplicados, ou carrinho vazio. O tom deve ser encorajador e prático, focando em soluções reais e melhores práticas para um ambiente de produção. Forneça trechos de código concisos e comentados para cada ponto chave."
Tags relacionadas
Vue
Casos de uso práticos em Vue
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Vue
ChatGPT
Melhores práticas de padrões de design em vue para Vue
Prompt gerado automaticamente para Padrões de design em Vue em Vue
5 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
3 usos