Vue3 및 TypeScript를 사용하여 Pinia Store를 Prop으로 전달

Question

<p>저는 Typescript, Pinia 및 Vue3을 사용하고 있으며 <code>MenuButton</code> 구성요소가 있고 메뉴 열기 상태와 표시할 작업에 대해 Pinia 저장/숨기기를 전달할 수 있기를 원합니다. . 애플리케이션에는 몇 가지 다른 메뉴가 있으므로 이를 전달하고 모두 동일한 팩토리를 사용하여 매장을 정의할 수 있기를 원합니다. 저는 이 모든 것을 TypeScript에서 작동하도록 하는 방법을 찾으려고 노력 중입니다. </p> <pre class="lang-js Prettyprint-override"><code>// nav.store.ts "pinia"에서 import { 정의스토어 }; "@vueuse/core"에서 { useStorage } 가져오기;; "@vueuse/core"에서 가져오기 유형 { RemovableRef };; 내보내기 인터페이스 MenuStore { isOpen: RemovableRef<boolean>, 토글(force?: boolean) : 무효, 오픈(): 무효, 닫기(): 무효, } 인터페이스 상태 { isOpen: RemovableRef;; } 함수 menuStoreFactory(id: 문자열) { return DefineStore(id, { 상태: () : 상태 => isOpen: useStorage(`${id}-open`, false), }), 작업: { 토글(force?: 부울) { this.isOpen = 강제 != 정의되지 않음 ? 강제: !this.isOpen; }, 열려 있는() { this.isOpen = true; }, 닫다() { this.isOpen = 거짓; } } }); } 내보내기 const useMainMenuStore = menuStoreFactory('mainMenu'); 내보내기 const useMobileMenuStore = menuStoreFactory('mobileMenu'); <pre class="lang-js Prettyprint-override"><code>// 메뉴 버튼 구성요소 설정 스크립트 "@/icons"에서 { MenuIcon, MenuLeftIcon } 가져오기;; "@/modules/nav/nav.store"에서 가져오기 유형 { MenuStore }; 인터페이스 소품 { 컨트롤러: 메뉴스토어 } const props = 정의Props<Props>(); <p>그렇다면 사용법은 매우 간단합니다:</p> <pre class="lang-html Prettyprint-override"><code><템플릿> <메뉴버튼 :controller="메인메뉴" ></메뉴버튼> </템플릿> <스크립트 설정 lang=ts"> const mainMenu = useMainMenuStore(); </스크립트> <p>현재 인터페이스에서는 prop 불일치 오류가 발생합니다. 몇 가지 조사 끝에 인터페이스를 다음과 같이 변경하여 사용 오류를 수정했지만 <code>MenuButton</code> /code> 코드>isOpen<이 해결되지 않았습니다.</p> <pre class="lang-js Prettyprint-override"><code>내보내기 인터페이스 MenuStore는 PiniaCustomStateProperties를 확장합니다<{ isOpen: RemovableRef<boolean>, 토글(force?: boolean) : 무효, 오픈(): 무효, 닫기(): 무효, }> {} <p>另一个接近的尝试调整是：</p> <pre class="lang-js Prettyprint-override"><code>내보내기 인터페이스 MenuStore는 Store를 확장합니다<string, { isOpen: RemovableRef<boolean>, 토글(force?: boolean) : 무효, 오픈(): 무효, 닫기(): 무효, }> {} <p>这导致了使用时流现此错误，但组件中没有错误</p> <pre class="brush:php;toolbar:false;">Type _StoreWithState<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void} > & UnwrapRef<State> & _StoreWithGetters<{}> & {toggle(force?: boolean): void, close(): void, open(): void} & PiniaCustomProperties<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void}> & PiniaCustomStateProperties<State> MenuStore 유형에 할당할 수 없습니다...   PiniaCustomStateProperties<State>를 입력합니다. MenuStore</pre></p> 유형에 할당할 수 없습니다.

Answer 1

귀하의 질문은 주로 필요한 유형/인터페이스에 관한 것 같아서 이에 대해 답변해 드리겠습니다.

유형을 직접 작성하는 대신 반환된 저장 유형을 간단히 사용할 수 있습니다.

반환하는 팩토리 함수가 있습니다. defineStore 的返回值，它本身就是一个返回存储的函数。因此，可以使用 typeof 获取工厂函数的类型，然后使用 TypeScript 的 ReturnType 도우미는 저장된 유형을 찾기 위해 반환 유형을 드릴다운합니다.

다음이 필요합니다:

으아악

분할:

으아악

• A: 팩토리 함수 유형을 가져옵니다.
• B: 팩토리 함수의 반환 유형, 즉 defineStore의 반환 값을 가져옵니다. 이 자체가 스토리지를 반환하는 함수입니다.
• C: 이 함수의 반환 유형을 가져옵니다. 이것은 상점 자체의 유형입니다.