<p>使用Vue 3的Composition API，每個視圖都需要有以下程式碼：</p> <pre class="brush:js;toolbar:false;">import { useRouter, useRoute } 從 '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 } 從 '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>