Obtenez une composition et une réactivité améliorées avec Vue.js 3.

Question

Étant donné les « useNumbers.js » combinés suivants dans Vue.js 3, je souhaite que les « numéros » du composant soient réactifs. Cependant, l'ajout d'une nouvelle valeur aux « nombres » dans un composant ne sera pas reflété dans le deuxième composant.

useNumbers.js:

importer { ref } depuis 'vue';

exporter la fonction par défaut() {
    nombres const = ref([1, 2, 3, 4, 5]);

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

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

    retourner { nombres, addNumber, filterNumber }
}</pré>
<p>Composant A :</p>
<pre class="brush:php;toolbar:false;"><template>
    <div>
        <h1>Composant enfant</h1>
        <p>{{ chiffres }}</p>
        <bouton @click="addNumber(45)">Ajouter 45</bouton>
        <div class="line"></div>
        <Petit-Enfant />
    </div>
</modèle>


<configuration du script>

importer des useNumbers depuis '../composables/useNumbers' ;
importer GrandChild depuis './GrandChild.vue' ;

const { nombres, addNumber } = useNumbers()

</script>

Composant B :

<template>
    <div>
        <h1>Composant GreatGrandChild</h1>
        <p>{{ chiffres }}</p>
        <div class="line"></div>
    </div>
</modèle>

<configuration du script>

importer des useNumbers depuis '../composables/useNumbers' ;

const { nombres } = useNumbers();

</script>

Chaque fois que je clique sur le bouton dans le composant A (en ajoutant 45 au tableau), ce changement n'est pas reflété dans le composant B. Je sais que des opérations comme la déstructuration des affectations entraînent une perte de réactivité.

const { nombres, addNumber } = useNumbers()

Réactivité cassée. J'ai essayé quelques choses en utilisant toRef et toRefs mais je n'ai pas encore trouvé de solution.

Answer 1

La raison principale de votre problème est que chaque fois que la fonction useNumbers est appelée, une nouvelle instance de l'objet Numbers est créée. Par conséquent, chaque composant possède sa propre copie de nombres, qui ne sont pas partagées entre les composants.

Utiliser le magasin

Answer 2

Pour conserver le même état sur plusieurs instances useNumbers, vous pouvez hisser l'état en dehors de la fonction afin qu'il ne soit créé qu'une seule fois.

import { ref } from 'vue';

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

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

Exemple de Vue Playground