Réduction du code passe-partout dans l'API de composition Vue 3 : simplification de la mise en œuvre du routeur et du stockage

Question

À l'aide de l'API Composition de Vue 3, chaque vue a besoin du code suivant :

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


exporter par défaut {
    installation() {
        const routeur = useRouter()
        const magasin = useStore()

        //...
     }
}
≪/pré>
Existe-t-il un moyen de les déclarer une fois lors de la création de l'application, puis de les transmettre à l'application créée et de les utiliser simplement dans la vue de l'application sans avoir besoin de ces déclarations ? Dans vue2, ceux-ci sont transmis lorsque l'application est initialisée, puis this.$store / this.$router 
Une idée pour utiliser des variables globales, qui peuvent facilement poser des problèmes : dans app.vue vous pouvez les déclarer une fois comme ceci : 
importer { useStore } depuis 'vuex'

exporter par défaut {
    installation() {
        globalthis.store = useStore()
≪/pré>
Alors store sera disponible partout. 
            

Answer 1

danssetup()中，组件实例不可用，因为组件尚未创建，所以在Composition API中没有this上下文可用于使用this.$store.

Je pense à setup()中使store/router变量可用的唯一方法而不需要其他导入是将它们作为全局变量附加到window/globalThis (en ignorant la restriction des variables globales) :

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

Veuillez noter que dans l'API Options et les modèles, vous pouvez toujours utiliser $store和$router pour accéder au magasin et au routeur. Pour des exemples spécifiques, veuillez vous référer aux exemples dans API Options et Pour Vuex 4 et 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>