<p>Bei Verwendung der Composition API von Vue 3 benötigt jede Ansicht den folgenden Code: </p> <pre class="brush:js;toolbar:false;">import { useRouter, useRoute } from 'vue-router' importiere { useStore } aus 'vuex' Standard exportieren { aufstellen() { const router = useRouter() const store = useStore() // ... } } </pre> <p>Gibt es eine Möglichkeit, sie beim Erstellen der Anwendung einmal zu deklarieren und sie dann an die erstellte Anwendung zu übergeben und sie einfach in der Anwendungsansicht zu verwenden, ohne dass diese Deklarationen erforderlich sind? In vue2 werden diese übergeben, wenn die Anwendung initialisiert wird, und dann funktioniert <code>this.$store</code> / <code>this.$router</code> </p> <p>Eine Idee, globale Variablen zu verwenden, die leicht zu Problemen führen können: In <code>app.vue</code> können Sie sie einmal so deklarieren: </p> <pre class="brush:js;toolbar:false;">import { useStore } from 'vuex' Standard exportieren { aufstellen() { globalthis.store = useStore() </pre> <p>Dann ist <code>store</code> überall verfügbar. </p>

// router.js
import { createRouter } from 'vue-router'
export default createRouter({/*...*/})

// store.js
import { createStore } from 'vuex'
export default createStore({/*...*/})

// main.js
import router from './router'
import store from './store'

window.$router = router
window.$store = store

<template>
  <div>{{ $store.state.myProp }}</div>
  <button @click="$router.back()">返回</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store.state.myProp)
    console.log(this.$router.currentRoute)
  }
}
</script>