Vue 3 構成 API の定型コードの削減: ルーターとストレージの実装の簡素化

Question

Vue 3 の Comboposition API を使用するには、各ビューに次のコードが必要です。

import { useRouter, useRoute } from 'vue-router'
「vuex」からインポート { useStore }


デフォルトのエクスポート {
    設定（） {
        const ルーター = useRouter()
        const ストア = useStore()

        // ...
     }
}

アプリケーションの作成時にそれらを一度宣言し、作成したアプリケーションに渡して、これらの宣言を必要とせずにアプリケーションビューで単に使用する方法はありますか? vue2 では、これらはアプリケーションの初期化時に渡されるため、this.$store / this.$router は正常に動作します。

問題を引き起こしやすいグローバル変数を使用するアイデア: app.vue では、次のように変数を 1 回宣言できます:

「vuex」から { useStore } をインポートします

デフォルトのエクスポート {
    設定（） {
        globalthis.store = useStore()

これにより、store がどこでも利用できるようになります。

Answer 1

setup() では、コンポーネントがまだ作成されていないため、コンポーネント インスタンスは使用できません。そのため、Composition API には を使用するための this コンテキストがありません。 this.$store。

追加のインポートを必要とせずに setup() でストア/ルーター変数を使用できるようにする唯一の方法 は、それらをグローバル変数として window## にアタッチすることだと思います #/globalThis (グローバル変数の制限を無視): リーリー オプション API とテンプレートでは、引き続き

$store

と $router を使用してストアとルーターにアクセスできることに注意してください。具体的な例については、## を参照してください。 #Options API## テンプレート の例 (Vuex 4 および Vue Router 4 の場合): リーリー