Liberte-se da perfuração Vue Prop com fornecimento/injeção

Vue oferece diversas maneiras de gerenciar o fluxo de dados e a comunicação entre componentes. Um desafio comum como desenvolvedor Vue é o prop drill, onde você transmite dados através de várias camadas de componentes, levando a uma base de código complexa e de menor manutenção.

Vue oferece o mecanismo de fornecimento/injeção, uma solução limpa para perfuração de suporte. Fornecer/injetar ajuda a gerenciar a comunicação de dados entre pais e componentes filhos profundamente aninhados.

Compreendendo o problema de perfuração auxiliar

Antes de se aprofundar na solução de fornecimento/injeção, é importante entender o problema. O detalhamento de prop ocorre quando você precisa passar dados de um componente pai de nível superior para um componente filho profundamente aninhado.

Os componentes intermediários nesta hierarquia precisam receber e transmitir os dados, mesmo que eles próprios não os utilizem. Para passar dados de um componente pai para um componente filho, você precisará

passe esses dados como acessórios para seus componentes Vue.

Considere a seguinte hierarquia de componentes como exemplo:

• Aplicativo
  • ParentComponent
    • Componente Filho
      • GrandChildComponent

Suponha que os dados do Aplicativo componente precisa atingir o GrandChildComponent. Nesse caso, você precisaria passá-lo pelos dois componentes intermediários usando props, mesmo que esses componentes não precisem dos dados para funcionar corretamente. Isso pode levar a um código inchado e mais difícil de depurar.

O que é fornecer/injetar?

Vue aborda esse problema com o fornecer/injetar recurso, que permite que um componente pai forneça dados ou funções para seus componentes descendentes, não importa quão profundamente aninhados eles estejam. Esta solução simplifica o compartilhamento de dados e melhora a organização do código.

Componente Provedor

Um componente provedor pretende compartilhar dados ou métodos com seus descendentes. Ele usa o fornecer opção de disponibilizar esses dados aos seus filhos. Aqui está um exemplo de componente de provedor:

<template>
<div>

<ParentComponent/>
div>
template>
<scriptsetup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';
const greeting = 'Hello from Provider';
provide('greeting', greeting);
script>

Este bloco de código mostra um componente de provedor, Aplicativo, que fornece uma saudações variável para todos os seus componentes descendentes. Para fornecer uma variável, você precisa definir uma chave. Definir a chave com o mesmo nome da variável ajuda a manter seu código sustentável.

Componentes Descendentes

Componentes descendentes são componentes dentro de uma estrutura aninhada. Eles podem injetar e usar os dados fornecidos em sua instância de componente. Veja como isso é feito:

<scriptsetup>
import { inject } from 'vue';
const injectedData = inject('greeting');
script>

O componente descendente injeta os dados fornecidos e pode acessá-los em seu modelo como uma variável definida localmente.

Agora, considere a imagem abaixo:

Nesta imagem você pode ver uma hierarquia de quatro componentes, começando com um componente raiz que serve como ponto de partida. Os outros componentes se aninham na hierarquia, terminando no Neto componente.

O componente GrandChild recebe os dados que o componente App fornece. Com esse mecanismo implementado, você pode evitar a passagem de dados pelo Pai e Criança componentes, uma vez que esses componentes não precisam dos dados para funcionar corretamente.

Fornecimento de dados em nível de aplicativo (global)

Você pode fornecer dados no nível do aplicativo com o provide/inject. Este é um caso de uso comum para compartilhar dados e configurações entre diferentes componentes em seu aplicativo Vue.

Aqui está um exemplo de como você pode fornecer dados no nível do aplicativo:

// main.js
import { createApp } from'vue'
import App from'./App.vue'
const globalConfig = {
 apiUrl: 'https://example.com/api',
 authKey: 'my-secret-key',
// Other configuration settings...
};
app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')

Suponha que você tenha um aplicativo que requer um objeto de configuração global contendo Interface de programação de aplicativos (API) endpoints, informações de autenticação do usuário e outras configurações.

Você pode conseguir isso fornecendo os dados de configuração no componente de nível superior, normalmente em seu principal.js arquivo, permitindo que outros componentes o injetem e usem:

<template>
<div>
<h1>API Settingsh1>
<p>API URL: {{ globalConfig.apiUrl }}p>
<p>Authentication Key: {{ globalConfig.authKey }}p>
div>
template>
<scriptsetup>
import { inject } from 'vue';
const globalConfig = inject('globalConfig');
script>

O componente acima usa o injetar função para acessar o configuração global objeto, que o aplicativo fornece em nível global. Você pode acessar quaisquer propriedades ou configurações de globalConfig interpolando ou vinculando essas propriedades com diferentes técnicas de vinculação de dados no Vue dentro do componente.

Benefícios e usos de fornecer e injetar

Aqui estão alguns benefícios e usos importantes do recurso fornecer/injetar ao criar aplicações web em Vue.

Código mais limpo e com mais desempenho otimizado

Usando fornecer/injetar, você elimina a necessidade de componentes intermediários transmitirem dados que não usam. Isso resulta em um código mais limpo e de fácil manutenção, reduzindo declarações desnecessárias de prop.

Além disso, o sistema de reatividade do Vue garante que os componentes sejam renderizados novamente quando suas dependências mudarem. Fornecer/injetar permite que os dados sejam compartilhados de forma eficiente, o que pode levar a otimizações de desempenho, reduzindo novas renderizações desnecessárias.

Encapsulamento de componentes aprimorado

Fornecer/injetar promove melhor encapsulamento de componentes. Os componentes filhos só precisam se preocupar com os dados que usam explicitamente, reduzindo sua dependência da estrutura de dados específica dos componentes pais.

Considere um componente seletor de data que depende de configurações de formato de data localizadas. Em vez de passar essas configurações como adereços, você pode fornecê-las no componente pai e injetá-las apenas no componente seletor de data. Isso leva a uma separação mais clara de preocupações.

Injeção de dependência

Fornecer/injetar pode servir como uma forma simples de injeção de dependência, tornando serviços e configurações globais - como Clientes API, endpoints, preferências do usuário ou armazenamentos de dados – prontamente disponíveis para qualquer componente que precise deles. Isso garante configurações consistentes em todo o seu aplicativo.

Pontos essenciais a serem considerados ao usar Provide e Inject

Enquanto o fornecer/injetar mecanismo oferece muitas vantagens, você deve usá-lo com cuidado para evitar efeitos colaterais indesejados.

• Usar fornecer/injetar para compartilhar dados ou funções importantes necessárias em uma hierarquia de componentes, como configuração ou chaves de API. O uso excessivo pode tornar os relacionamentos dos componentes muito complexos.
• Documente o que o componente provedor fornece e quais componentes descendentes devem injetar. Isso auxilia na compreensão e manutenção de seus componentes, principalmente ao trabalhar em equipe.
• Tenha cuidado ao criar loops de dependência, onde um componente filho fornece algo que um componente pai injeta. Isso levará a erros e comportamento inesperado.

Fornecer/Injetar é a melhor opção para gerenciamento de estado no Vue?

Fornecer/injetar é outro recurso útil do Vue para gerenciar o fluxo e o estado de dados em todos os componentes. Fornecer/injetar vem com sua cota de desvantagens. Fornecer/injetar pode levar a desafios na depuração, teste e manutenção de aplicativos em grande escala.

Usar Pinia, a estrutura oficial de gerenciamento de estado do Vue, seria melhor para lidar com estados complexos em seu aplicativo Vue. Pinia fornece um armazenamento centralizado e uma abordagem segura para gerenciamento de estado, tornando o desenvolvimento de aplicativos Vue mais acessível.