Vue 3 Composition API의 상용구 코드 줄이기: 라우터 및 스토리지 구현 단순화

Question

Vue 3의 Composition API를 사용하면 각 뷰에 다음 코드가 필요합니다.

'vue-router'에서 { useRouter, useRoute } 가져오기
'vuex'에서 { useStore } 가져오기


기본값 내보내기 {
    설정() {
        const 라우터 = useRouter()
        const 저장소 = useStore()

        // ...
     }
}

애플리케이션을 생성할 때 이를 한 번 선언한 다음 생성된 애플리케이션에 전달하고 이러한 선언을 요구하지 않고 애플리케이션 보기에서 간단히 사용할 수 있는 방법이 있습니까? vue2에서는 애플리케이션이 초기화될 때 이러한 내용이 전달되며, 그러면 this.$store / this.$router가 제대로 작동합니다.

쉽게 문제를 일으킬 수 있는 전역 변수를 사용하는 아이디어: app.vue에서 다음과 같이 한 번 선언할 수 있습니다.

'vuex'에서 { useStore } 가져오기

기본값 내보내기 {
    설정() {
        globalthis.store = useStore()

그러면 store를 어디에서나 사용할 수 있습니다.

Answer 1

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

제 생각에는 setup()中使store/router变量可用的唯一方法而不需要其他导入是将它们作为全局变量附加到window/globalThis(전역 변수의 제한을 무시하고):

으아악

옵션 API 및 템플릿에서는 $store和$router를 사용하여 스토어 및 라우터에 액세스할 수 있습니다. 구체적인 예는 Vuex 4 및 Vue Router 4에 대한 Options API 및 templates의 예를 참조하세요. 으아악