如何减少 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() 中不可用，因为组件尚未创建，因此组合 API 中没有 this 上下文可以使用 this.$store .

我认为使 store/router 变量在 setup() 中可用而无需任何其他导入 的唯一方法是将它们附加到 window /globalThis 作为全局变量（忽略 caveats of globals）：

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

请注意，商店和路由器仍然可用 in the Options API and within the template，分别为 $store 和 $router，对于 Vuex 4 和 Vue Router 4：

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

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

如何减少 Vue 3 Composition API 中的样板代码（例如路由器、商店）

How to reduce boilerplate code in Vue 3 Composition API (eg router, store)

vue.js

vuejs3

vue-composition-api