Mencapai komposisi dan tindak balas yang dipertingkatkan dengan Vue.js 3.

Question

Memandangkan gabungan 'useNumbers.js' berikut dalam Vue.js 3, saya mahu 'nombor' dalam komponen menjadi responsif. Walau bagaimanapun, menambah nilai baharu pada 'nombor' dalam satu komponen tidak akan ditunjukkan dalam komponen kedua.

useNumbers.js:

import { ref } daripada 'vue';

eksport fungsi lalai() {
    nombor const = ref([1, 2, 3, 4, 5]);

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

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

    kembalikan { nombor, tambahNombor, penapisNombor }
}

Komponen A:

<template>
    <div>
        <h1>Komponen kanak-kanak</h1>
        <p>{{ nombor }}</p>
        <butang @click="addNumber(45)">Tambah 45</button>
        <div class="line"></div>
        <Cucu />
    </div>
</template>


<persediaan skrip>

import useNumbers daripada '../composables/useNumbers';
import GrandChild daripada './GrandChild.vue';

const { numbers, addNumber } = useNumbers()

</script>

Komponen B:

<template>
    <div>
        <h1>Komponen GreatGrandChild</h1>
        <p>{{ nombor }}</p>
        <div class="line"></div>
    </div>
</template>

<persediaan skrip>

import useNumbers daripada '../composables/useNumbers';

const {nombor } = useNumbers();

</script>

Setiap kali saya mengklik butang dalam komponen A (menambah 45 pada tatasusunan), perubahan ini tidak ditunjukkan dalam komponen B. Saya tahu bahawa operasi seperti memusnahkan tugasan mengakibatkan kehilangan responsif.

const { numbers, addNumber } = useNumbers()

Tindak balas rosak. Saya telah mencuba beberapa perkara menggunakan toRef dan toRefs tetapi masih belum menemui penyelesaian.

Answer 1

Sebab utama masalah anda ialah setiap kali fungsi useNumbers dipanggil, contoh objek nombor baharu dicipta. Oleh itu, setiap komponen mempunyai salinan nombor sendiri, yang tidak dikongsi antara komponen.

Guna kedai

Answer 2

Untuk mengekalkan keadaan yang sama merentas berbilang contoh useNumbers, anda boleh menaikkan keadaan di luar fungsi supaya ia hanya dibuat sekali.

import { ref } from 'vue';

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

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

Vue Playground contoh