Vue 3 Composition API의 상용구 코드 줄이기: 라우터 및 스토리지 구현 단순화
<p>Vue 3의 Composition API를 사용하면 각 뷰에 다음 코드가 필요합니다. </p>
<pre class="brush:js;toolbar:false;">'vue-router'에서 { useRouter, useRoute } 가져오기
'vuex'에서 { useStore } 가져오기
기본값 내보내기 {
설정() {
const 라우터 = useRouter()
const 저장소 = useStore()
// ...
}
}
</pre>
<p>애플리케이션을 생성할 때 이를 한 번 선언한 다음 생성된 애플리케이션에 전달하고 이러한 선언을 요구하지 않고 애플리케이션 보기에서 간단히 사용할 수 있는 방법이 있습니까? vue2에서는 애플리케이션이 초기화될 때 이러한 내용이 전달되며, 그러면 <code>this.$store</code> / <code>this.$router</code>가 제대로 작동합니다. </p>
<p>쉽게 문제를 일으킬 수 있는 전역 변수를 사용하는 아이디어: <code>app.vue</code>에서 다음과 같이 한 번 선언할 수 있습니다. </p>
<pre class="brush:js;toolbar:false;">'vuex'에서 { useStore } 가져오기
기본값 내보내기 {
설정() {
globalthis.store = useStore()
</pre>
<p>그러면 <code>store</code>를 어디에서나 사용할 수 있습니다. </p>
