VueJS의 유형 참조 제공/주입 기능

Question

<p>상위 구성 요소에서 형식화된 참조를 제공하고 이를 하위 구성 요소에 삽입하려고 합니다. </p> <p>제가 VueJS 문서를 이해했는지 잘 모르겠지만 이것이 제가 생각해낸 것입니다. </p> <pre class="brush:php;toolbar:false;">'vue'에서 유형 { Ref } 가져오기 'vue'에서 가져오기 유형 {InjectionKey } '@/types/DocumentSet'에서 DocumentSet 유형 가져오기 const documentSet = Symbol() as 주입키<{ documentSet: Ref, 업데이트: () => }> 기본 문서 세트 내보내기</pre> <p>따라서 작업은 형식화된 개체(제 경우에는 documentSet)와 이를 업데이트하는 함수를 제공하는 것입니다. </p> <p>이제 상위 구성 요소에는 다음 코드가 있습니다. </p> <pre class="brush:php;toolbar:false;">'@/injectionKeys/documentSet'에서 dsKey 가져오기 '@/types/DocumentSet'에서 DocumentSet 유형 가져오기 ... const documentSet = ref<DocumentSet null>(null) | 제공(dsKey, { 문서 세트, 업데이트: () => console.log('업데이트') })</pre> <p>그리고 하위 구성요소에는 다음 코드가 있습니다. </p> <pre class="brush:php;toolbar:false;">'@/injectionKeys/documentSet'에서 dsKey 가져오기 const ds = 주입(dsKey) const documentSet = ds?.documentSet</pre> <p>문제는 상용구 코드가 너무 많아서 뭔가 잘못하고 있는 것 같은 느낌이 든다는 것입니다.예를 들어 ds 객체를 다음과 같이 리팩토링해야 하는 이유를 이해할 수 없습니다. </p> <pre class="brush:php;toolbar:false;">const { documentSet } = ds</pre> <p><code>ds?.documentSet</code>를 작성하는 대신 코드를 줄이는 것이 가능합니까? 특히 ds가 존재해야 한다고 확신하는 경우(이 없이는 하위 구성 요소를 렌더링하지 않습니다)< ;/p> <p><code>const { documentSet } = inject(dsKey)</code>라고 쓰면 다음 오류가 나타납니다. </p> <p><code>TS2339: 'documentSet' 속성이 '{ documentSet: Ref ;' 업데이트: () => Invalid '.</code></p> <p>하위 구성 요소에서 중복을 제거하고 싶기 때문입니다.</p> <pre class="brush:php;toolbar:false;"><DocumentSetInfo :documentSet="문서세트" /> <문서세트메모 :documentSet="문서세트" /> <DocumentSetPrograms :documentSet="문서세트" /> <문서세트청원 :documentSet="문서세트" /> <DocumentSetPassRequests :documentSet="문서세트" /> <문서세트보고서 :documentSet="문서세트" /> <DocumentSetReceptionNotices :documentSet="문서세트" //></pre></p>

Answer 1

프로비저닝을 처리하는 기능 제공과 주입을 처리하는 기능 사용*을 제공하는 컴포저블에 넣을 수 있습니다.

으아악

이제 상위 구성 요소에서 provideCurrentDocumentSet()를 호출하기만 하면 되며 모든 하위 구성 요소는 다음 작업만 수행하면 됩니다.

으아악

InjectionKey를 내보낼 필요도 없고 구성 요소도 이에 대해 알 필요가 없습니다. (Vuetify도 이 작업을 수행합니다. 예를 들어 여기)