减少Vue 3 Composition API中的样板代码：简化路由器和存储的实现

Question

使用Vue 3的Composition API，每个视图都需要有以下代码：

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


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

        // ...
     }
}

有没有一种方式可以在创建应用程序时声明它们一次，然后将它们传递给创建的应用程序，并在应用程序视图中简单地使用它们，而不需要这些声明？在vue2中，这些是在应用程序初始化时传递的，然后this.$store / this.$router就可以正常工作。

一种使用全局变量的想法，这可能很容易引起问题：在app.vue中，可以这样声明它们一次：

import { useStore } from '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>