減少Vue 3 Composition API中的樣板程式碼：簡化路由器和儲存的實現

Question

使用Vue 3的Composition API，每個視圖都需要有以下程式碼：

import { useRouter, useRoute } 從 'vue-router'
import { useStore } from 'vuex'


export default {
    setup() {
        const router = useRouter()
        const store = useStore()

        // ...
     }
}

有沒有一種方式可以在創建應用程式時聲明它們一次，然後將它們傳遞給創建的應用程序，並在應用程式視圖中簡單地使用它們，而不需要這些聲明？在vue2中，這些是在應用程式初始化時傳遞的，然後this.$store / this.$router就可以正常運作。

一種使用全域變數的想法，這可能很容易引起問題：在app.vue中，可以這樣聲明它們一次：

import { useStore } 從 'vuex'

export default {
    setup() {
        globalthis.store = useStore()

然後store將在任何地方都可使用。

Answer 1

在setup()中，元件實例不可用，因為元件尚未創建，所以在Composition API中沒有this上下文可用於使用this.$store。

我認為在setup()中使store/router變數可用的唯一方法而不需要其他匯入是將它們作為全域變數附加到window/globalThis上（忽略全域變數的限制）：

// 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

請注意，在Options API中和範本中，仍可使用$store和$router存取store和router，具體範例可參考Options API和模板中的範例，對於Vuex 4和Vue Router 4：

<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>