Mengurangkan kod boilerplate dalam API Komposisi Vue 3: memudahkan pelaksanaan penghala dan storan

Question

Menggunakan API Komposisi Vue 3, setiap paparan memerlukan kod berikut:

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


eksport lalai {
    persediaan() {
        penghala const = useRouter()
        kedai const = useStore()

        // ...
     }
}

Adakah terdapat cara untuk mengisytiharkannya sekali semasa membuat aplikasi dan kemudian menyerahkannya kepada aplikasi yang dibuat dan hanya menggunakannya dalam paparan aplikasi tanpa memerlukan pengisytiharan ini? Dalam vue2, ini diluluskan apabila aplikasi dimulakan, dan kemudian this.$store 
Idea untuk menggunakan pembolehubah global, yang boleh menyebabkan masalah dengan mudah: dalam app.vue
import { useStore } daripada 'vuex'

eksport lalai {
    persediaan() {
        globalthis.store = useStore()

Kemudian store akan tersedia di mana-mana sahaja. 

Answer 1

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

Saya memikirkan setup()中使store/router变量可用的唯一方法而不需要其他导入是将它们作为全局变量附加到window/globalThis (mengabaikan sekatan pembolehubah global):

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

Sila ambil perhatian bahawa dalam API Pilihan dan templat, anda masih boleh menggunakan $store和$router untuk mengakses kedai dan penghala Untuk contoh khusus, sila rujuk contoh dalam API Pilihan dan Templat Vuex 4 dan Vue 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>