Vue 3 の単一のスクリプト タグ内の複数のコンポーザブル インスタンス

Question

私は現在、オプション API を使用して作成したコンポーネントの書き直しに取り組んでいます。コード シェアリングの観点から見ると、興味深い書き換えポイントは、モーダル ボックスの多くに、表示されるすべての場所に独自のクローズ/オープンおよびブール ロジックが付加されていることです。

私の問題は、1 つのコンポーズ可能な関数を複数のモーダル インスタンスで機能させる方法を理解するのに苦労していることです。

この非常に単純な例を考えてみましょう:

Modal.vue

リーリー リーリー

useModal.ts

リーリー

次に、これをコンポーネントで使用するには、次のようにします:

Component.vue

リーリー リーリー

ページ上にモーダル ボックスが 1 つだけある場合はこれでまったく問題ありませんが、モーダル ボックスがいくつでも機能するようにするにはどうすればよいでしょうか?どのモーダルが切り替えられているか、開かれているかを追跡するために変数名を定義する必要があることは明らかですが、各モーダルの useModal 結合コンテンツを再作成せずにこれを実現するにはどうすればよいでしょうか?

理想的には、これと同様のことをしたいと考えています

リーリー リーリー

しかし、これは機能しません(当然です)。ここで私の目標を達成する方法はありますか、それとも組み合わせた関数をどのように/いつ使用するかについて根本的な誤解を持っていますか?

このようなバリエーションをいくつか試してみました

リーリー

しかし、これらはどれも私には役に立ちません。

Answer 1

次のように、オブジェクトの構造化中にコンポーズ可能な関数の戻り値の名前を再割り当てできます。 リーリー

これは、追跡するモーダル ボックスの状態を区別するのに十分です。

ここでの実際の例:

https://codesandbox.io/s/vue-3-composition-destructuring-fts2x9