Vue.js 3 で強化された構成と応答性を実現します。

Question

次の Vue.js 3 の「useNumbers.js」を組み合わせた場合、コンポーネント内の「numbers」が応答するようにしたいと考えています。ただし、1 つのコンポーネントの「数値」に新しい値を追加しても、2 番目のコンポーネントには反映されません。

useNumbers.js:

import { ref } from 'vue';

デフォルト関数をエクスポート() {
    const 数値 = ref([1, 2, 3, 4, 5]);

    const addNumber = num => {
        数値.値.プッシュ(数値);
    }

    const filterNumber = minNum => {
        戻り値.value.filter(curNum => curNum >= minNum);
    }

    return { 数値、addNumber、filterNumber }
}

コンポーネント A:

<テンプレート>
    <div>
        <h1>子コンポーネント</h1>
        <p>{{ 数字 }}</p>
        <button @click="addNumber(45)">45 を追加</button>
        <div class="line"></div>
        <孫 />
    </div>
</テンプレート>


＜スクリプト設定＞

useNumbers を '../composables/useNumbers' からインポートします。
'./GrandChild.vue' から GrandChild をインポートします。

const {数値, addNumber} = useNumbers()

</script>

コンポーネント B:

<テンプレート>
    <div>
        <h1>GreatGrandChild コンポーネント</h1>
        <p>{{ 数字 }}</p>
        <div class="line"></div>
    </div>
</テンプレート>

＜スクリプト設定＞

useNumbers を '../composables/useNumbers' からインポートします。

const {数値} = useNumbers();

</script>

コンポーネント A のボタンをクリックしても (配列に 45 を追加します)、この変更はコンポーネント B に反映されません。代入の構造化などの操作により応答性が失われることはわかっています。

const {数値, addNumber } = useNumbers()

応答性が壊れています。 toRef と toRefs を使用していくつかのことを試しましたが、まだ解決策が見つかりません。

Answer 1

問題の主な理由は、useNumbers 関数が呼び出されるたびに、新しい Numbers オブジェクト インスタンスが作成されることです。したがって、各コンポーネントには独自の番号のコピーがあり、コンポーネント間で共有されません。

ストアを使用する

Answer 2

複数の useNumbers インスタンス間で同じ状態を維持するには、状態が 1 回だけ作成されるように関数の外で状態をプロモートできます。

リーリー

Vue プレイグラウンドの例