Estratégias de casos de uso práticos em vue em Vue

"Você é um especialista em desenvolvimento web Vue.js. Crie um guia prático e detalhado sobre como implementar um sistema de 'carrinho de compras' persistente em um aplicativo Vue.js, utilizando Vuex para gerenciamento de estado e localStorage para persistência de dados. O guia deve abordar:

1.  **Estrutura do Vuex Store:** Definição de `state`, `mutations`, `actions` e `getters` relevantes para o carrinho (adicionar item, remover item, atualizar quantidade, limpar carrinho, calcular total).
2.  **Persistência com localStorage:** Como salvar o estado do carrinho no `localStorage` após cada modificação e como carregar esse estado ao iniciar a aplicação.
3.  **Componentização:** Exemplos de componentes Vue que interagem com o Vuex Store para exibir os itens do carrinho, botões de ação e o total.
4.  **Considerações de UX/UI:** Sugestões para uma experiência de usuário fluida, como feedback visual ao adicionar itens.
5.  **Boas Práticas:** Dicas para otimização de performance e manutenção do código.

O guia deve ser claro, conciso, incluir trechos de código relevantes (em JavaScript/Vue SFC) e focar em soluções práticas para um cenário real de e-commerce, evitando abstrações desnecessárias. O tom deve ser didático e encorajador para desenvolvedores Vue de nível intermediário."