<p>使用Vue 3的Composition API，每个视图都需要有以下代码：</p> <pre class="brush:js;toolbar:false;">import { useRouter, useRoute } from 'vue-router' import { useStore } from 'vuex' export default { setup() { const router = useRouter() const store = useStore() // ... } } </pre> <p>有没有一种方式可以在创建应用程序时声明它们一次，然后将它们传递给创建的应用程序，并在应用程序视图中简单地使用它们，而不需要这些声明？在vue2中，这些是在应用程序初始化时传递的，然后<code>this.$store</code> / <code>this.$router</code>就可以正常工作。</p> <p>一种使用全局变量的想法，这可能很容易引起问题：在<code>app.vue</code>中，可以这样声明它们一次：</p> <pre class="brush:js;toolbar:false;">import { useStore } from 'vuex' export default { setup() { globalthis.store = useStore() </pre> <p>然后<code>store</code>将在任何地方都可用。</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>