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

【问题标题】：How to reduce boilerplate code in Vue 3 Composition API (eg router, store)如何减少 Vue 3 Composition API 中的样板代码（例如路由器、商店）
【发布时间】：2021-07-31 15:33:46
【问题描述】：

使用 Vue 3 组合 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 可以在任何地方工作。

【问题讨论】：

那么商店将在任何地方工作 - 欢迎来到 oldschool JS。这就是以前的做法，而且代码很糟糕。 会有什么缺点吗？ - 然后某个使用相同思维方式的库的作者认为创建store 全局变量是个好主意，结果变得一团糟。污染全局范围是一种不好的做法。我希望有人可以链接到一个详细解释为什么会这样的问题。它不是特定于 Vue 的。在 Vue 2 中污染 Vue.prototype 是在同一条船上。
您可以尝试创建另一个组合 API 以返回新的作用域存储和路由器。我也和@Estus Flask 有同样的想法，作用域代码可以让调试变得容易。当您必须维护多个组件时，有时您很难知道全局值何时被某些代码更改。
同意全局变量会导致问题。 vue 3 有没有办法将这些传递给创建的应用程序并让它们仅在应用程序视图中可用，类似于 vue2 的工作方式？

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

组件实例在setup() 中不可用，因为组件尚未创建，因此组合API 中没有this 上下文可以使用this.$store。

我相信使存储/路由器变量在 setup() 中可用的唯一方法没有任何其他导入是将它们附加到 window/globalThis 作为全局变量（忽略 @987654321 @):

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

注意，对于 Vuex 4 和 Vue Router 4，store 和 router 仍然可用 in the Options API 和 within the template 分别为 $store 和 $router：

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

【讨论】：

感谢您也提到 Options API 替代方案