Compartilhando Dados entre Componentes no Vue.js

No Vue.js, cada componente pode ter seus próprios dados internos, mas também é possível compartilhar um conjunto de dados entre vários componentes. A forma como os dados são definidos na função data() determina se cada instância terá seus próprios valores ou se todas compartilharão a mesma referência.

Componentes com Dados Independentes

Quando data() retorna um novo objeto para cada instância do componente, cada uma mantém seus próprios dados isolados. Isso significa que modificar os valores de uma instância não afeta as demais. No exemplo abaixo, dois componentes counter são renderizados na página, e cada um tem seu próprio count:

<!DOCTYPE html>
<html>
<head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
    </div>
    <script>
        const app = Vue.createApp({});
        app.component('counter', {
            data() {
                return {
                    header: 'Counter Program',
                    count: 0
                };
            },
            template: `<div>
                        <h2>{{ header }}</h2>
                        <button v-on:click="increase">+</button>
                        <span>{{ count }}</span>
                        </div>`,
            methods: {
                increase() {
                    this.count++;
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

Como data() retorna um novo objeto para cada instância do componente, cada counter tem seu próprio count. Quando o botão de um componente é pressionado, apenas aquele contador específico é atualizado.

Componentes com Dados Independentes em Vue.js

Componentes com Dados Compartilhados

Se data() retornar uma referência a um objeto externo, todas as instâncias do componente acessarão os mesmos dados. Isso significa que qualquer modificação feita em uma instância afetará todas as outras. No exemplo abaixo, as instâncias de counter compartilham os mesmos valores do objeto globalData:

<!DOCTYPE html>
<html>
<head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
    </div>
    <script>
        let globalData = {
            header: 'Counter Program',
            count: 0
        };

        const app = Vue.createApp({});
        app.component('counter', {
            data() {
                return globalData;
            },
            template: `<div>
                        <h2>{{ header }}</h2>
                        <button v-on:click="increase">+</button>
                        <span>{{ count }}</span>
                        </div>`,
            methods: {
                increase() {
                    this.count++;
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

Neste caso, todas as instâncias do componente compartilham a mesma referência ao objeto globalData. Isso significa que, quando uma delas altera count, a outra também é afetada.

Componentes com Dados Compartilhados em Vue.js

Escolhendo entre Dados Independentes e Compartilhados

A escolha entre dados independentes ou compartilhados depende do comportamento desejado:

Se cada instância do componente precisa gerenciar seus próprios dados sem interferência externa, data() deve retornar um novo objeto para cada instância.
Se os dados precisarem ser sincronizados entre várias instâncias, um objeto externo pode ser usado para armazená-los e ser referenciado pelos componentes.