Reduzierung des Boilerplate-Codes in der Vue 3 Composition API: Vereinfachung der Router- und Speicherimplementierung

Question

Bei Verwendung der Composition API von Vue 3 benötigt jede Ansicht den folgenden Code:

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


Standard exportieren {
    aufstellen() {
        const router = useRouter()
        const store = useStore()

        // ...
     }
}

Gibt es eine Möglichkeit, sie beim Erstellen der Anwendung einmal zu deklarieren und sie dann an die erstellte Anwendung zu übergeben und sie einfach in der Anwendungsansicht zu verwenden, ohne dass diese Deklarationen erforderlich sind? In vue2 werden diese übergeben, wenn die Anwendung initialisiert wird, und dann funktioniert this.$store / this.$router

Eine Idee, globale Variablen zu verwenden, die leicht zu Problemen führen können: In app.vue können Sie sie einmal so deklarieren:

import { useStore } from 'vuex'

Standard exportieren {
    aufstellen() {
        globalthis.store = useStore()

Dann ist store überall verfügbar.

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>