Vue のフェッチが 2 回呼び出される

Question

次のコードスニペットがあります:

リーリー

fetch が 2 回呼び出されますが、理由はわかりません。 解決策はありますか?

Answer 1

共有コードから、コンポーネントが 2 回インストールされているように見えるため、それをインストールしているコンポーネントを確認することをお勧めします。

ただし、応答が複数回取得されないように保存することができます。 リーリー

tags はコンポーネントの外部で宣言されているため、グローバル変数のように動作し、ステートフルになります。コンポーネント が に設定されるたびに、タグがロードされているかどうかを確認してからキャッシュされたデータを使用するか、それをロードしてその後項目を更新します。

この例に関する注意事項...

理想的には、そのようなロジックは別のファイルに存在し、より適切に抽象化される必要があります。たとえば、複数の API がある場合、それらの API はこの機能を共有できます。
const {ステータス、データ、エラー} = useApiCall('/tags')。また、例のタグはすでに ref であるため、items を使用する代わりに tags を直接使用することもできます。 API 呼び出しのステータスを追跡することで解決できる競合状態が存在する場合もあります。