Vue3 및 TypeScript를 사용하여 Pinia Store를 Prop으로 전달
<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> 유형에 할당할 수 없습니다.
