Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Duvida <Keep Alive>

Referente ao curso Vue 3: entendendo componentes, diretivas e reatividade no framework

por Mateus Dantas de Almeida
| 37k xp | 3 posts

Olá, bom dia

Achei interessantíssimo o Keep Alive para preservar os dados dos estados, estava me batendo quando transitava da segunda página de volta q as seleções sumiam, Porém, fiquei com uma duvida referente a aula... no caso , o prof ensina a incluir o 'includes' (kkkk ficou estranho incluir includes) na tag , nomeando o componente e trazendo ele como unico componente a manter os estados e tals...

Mas, e se deixarmos apenas o componente SelecionarIngredientes envelopado pelo Keep Alive e o segundo comp ( q nao teria necessidade de estar no keep alive) manter fora da tag, alterando a diretiva dele de v-else-if para v-if, funcionaria?

`

    <SuaLista :ingredientes="ingredientes"/>

    <KeepAlive>
      <SelecionarIngredientesVue v-if="conteudo === 'SelecionarIngredientes'"
       @adicionar-ingrediente="adicionarIngrediente" 
       @remover-ingrediente="removerIngrediente"
       @buscar-receitas="navegar('MostrarReceitas')"
       />
       
   </KeepAlive>
      
      <MostrarReceitas v-if="conteudo === 'MostrarReceitas'"
      @editar-receitas="navegar('SelecionarIngredientes')"
      />
</main>

`

1 resposta
solução!
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team Intrutor e Desenvolvedor de Software

Oi, Mateus, tudo bem?

Que ótima pergunta! Admito que eu não havia pensado nessa solução. Ela parece funcionar muito bem!

A única desvantagem que eu vejo é que você perde o benefício de utilizar as diretivas v-else-if e v-else no componente que vem logo em seguida, o que pode atrapalhar um pouco a escrita de condicionais encadeados, obrigando você a usar v-if.

No cenário do nosso projeto, isso não é um problema, já que estamos controlando a simples exibição de duas páginas e não faz tanta diferença.

Mas além disso, em situações mais complexas, você pode querer ter um controle ainda maior dos componentes que devem ser cacheados, e para isso o KeepAlive fornece vários recursos além do include, como exclude e até mesmo a quantidade máxima de componentes a serem cacheados, como você pode conferir na documentação. Nessas situações também pode ser interessante agrupar os componentes todos juntos dentro do KeepAlive.

Bons estudos!