Erzielen Sie eine verbesserte Komposition und Reaktionsfähigkeit mit Vue.js 3.

Question

Angesichts der folgenden kombinierten „useNumbers.js“ in Vue.js 3 möchte ich, dass „Zahlen“ in der Komponente reagieren. Das Hinzufügen eines neuen Werts zu „Zahlen“ in einer Komponente wird jedoch nicht in der zweiten Komponente widergespiegelt.

useNumbers.js:

import { ref } from 'vue';

Standardfunktion exportieren() {
    const zahlen = ref([1, 2, 3, 4, 5]);

    const addNumber = num =>
        zahlen.value.push(num);
    }

    const filterNumber = minNum =>
        return zahlen.value.filter(curNum => curNum >= minNum);
    }

    return { Zahlen, AddNumber, FilterNumber }
}

Komponente A:

<template>
    <div>
        <h1>Untergeordnete Komponente</h1>
        <p>{{ Zahlen }}</p>
        <button @click="addNumber(45)">45 hinzufügen</button>
        <div class="line"></div>
        <Enkelkind />
    </div>
</template>


<Skript-Setup>

importiere useNumbers aus '../composables/useNumbers';
GrandChild aus './GrandChild.vue' importieren;

const { Zahlen, addNumber } = useNumbers()

</script>

Komponente B:

<template>
    <div>
        <h1>GreatGrandChild-Komponente</h1>
        <p>{{ Zahlen }}</p>
        <div class="line"></div>
    </div>
</template>

<Skript-Setup>

importiere useNumbers aus '../composables/useNumbers';

const { Zahlen } = useNumbers();

</script>

Immer wenn ich auf die Schaltfläche in Komponente A klicke (und dem Array 45 hinzufüge), wird diese Änderung nicht in Komponente B widergespiegelt. Ich weiß, dass Vorgänge wie die Destrukturierung von Zuweisungen zu einem Verlust der Reaktionsfähigkeit führen.

const { zahlen, addNumber } = useNumbers()

Unterbrochene Reaktionsfähigkeit. Ich habe ein paar Dinge mit toRef und toRefs ausprobiert, aber noch keine Lösung gefunden.

Answer 1

您的问题的主要原因是每次调用useNumbers函数时，都会创建一个新的numbers对象实例。因此，每个组件都有自己的numbers副本，这些副本在组件之间不共享。

使用store

Answer 2

为了在多个useNumbers实例之间保持相同的状态，您可以将状态提升到函数外部，这样它只会被创建一次。

import { ref } from 'vue';

const numbers = ref([1, 2, 3, 4, 5]);

export default function() { 
  ...
  return { numbers }
}

Vue Playground example