onMounted フック内での Vue 3 構成 API useRouter() の使用

Question

onMounted フックで呼び出されるコンポーネントで useRoute を使用したいと考えています。 似たような＃＃＃ リーリー

CheckUserAuth.ts は:

リーリー

ルーターがどこでも未定義である理由がわかりません。ルーターをパラメーターとして渡さずにこれを修正する方法はありますか? (checkUserAuth関数を完全にカプセル化したい)

修正できることはわかっています

リーリー

しかし、これは良い解決策ではありません

Answer 1

公式ドキュメントに記載されているように、useRouter の API はセットアップ時に呼び出す必要があります。これは https://router.vuejs.org/zh/api/#userouter (zh ドキュメントに記載) で確認できます。 おそらく次のようなコードを書くことができます:

リーリー

そして設定でそれを呼び出します:

リーリー

お役に立てば幸いです。

Answer 2

コンポーザブル項目は、その実装で他の用途が許可されていない限り、設定で直接使用する必要があります。これはケースバイケースで決定する必要があります。

checkUserAuth はコンポーザブルを使用してコンポーザブルにするため、インストールされたフック内でそれを使用する必要がある場合は、これを可能にする関数を返す必要があります。

リーリー

あるいは、checkUserAuth コンポーザブルは使用しないでください。 useUserStore にはコンポーザブル項目に固有の制限はなく、useRouter はルーター インスタンスのインポートに置き換えることができます。