使用 Vue3 和 TypeScript 將 Pinia Store 作為 Prop 傳遞
<p>我正在使用 Typescript、Pinia 和 Vue3，並且有一個 <code>MenuButton</code> 元件，我希望能夠傳遞用於選單開啟狀態以及要顯示的操作的 Pinia 儲存/隱藏。應用程式中有幾個不同的選單，因此我希望能夠將它們傳入，並且它們都使用相同的工廠來定義商店。我正在嘗試弄清楚如何讓所有這些都與打字稿一起使用。 </p>
<pre class="lang-js prettyprint-override"><code>// nav.store.ts
import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
import type { RemovableRef } from "@vueuse/core";
export interface MenuStore {
isOpen: RemovableRef<boolean>,
toggle(force?: boolean) : void,
open(): void,
close(): void,
}
interface State {
isOpen: RemovableRef<boolean>;
}
function menuStoreFactory(id: string) {
return defineStore(id, {
state: () : State => ({
isOpen: useStorage(`${id}-open`, false),
}),
actions: {
toggle(force?: boolean) {
this.isOpen = force != undefined ? force : !this.isOpen;
},
open() {
this.isOpen = true;
},
close() {
this.isOpen = false;
}
}
});
}
export const useMainMenuStore = menuStoreFactory('mainMenu');
export const useMobileMenuStore = menuStoreFactory('mobileMenu');
</code></pre>
<pre class="lang-js prettyprint-override"><code>// setup script for the menu button component
import { MenuIcon, MenuLeftIcon } from "@/icons";
import type { MenuStore } from "@/modules/nav/nav.store";
interface Props {
controller: MenuStore
}
const props = defineProps<Props>();
</code></pre>
<p>那麼用法就很簡單了：</p>
<pre class="lang-html prettyprint-override"><code><template>
<MenuButton
:controller="mainMenu"
></MenuButton>
</template>
<script setup lang=ts">
const mainMenu = useMainMenuStore();
</script>
</code></pre>
<p>在目前介面中，我收到了道具不匹配的錯誤。經過一番研究，我將介面變成了以下內容，修復了使用錯誤，但隨後在<code>MenuButton</code> 組件中引發了<code>toggle()</code> 和< code>isOpen< 的錯誤/code> 尚未解決。</p>
匯出介面 MenuStore 擴充 PiniaCustomStateProperties<{
isOpen: RemovableRef,
切換（力？：布林值）：無效，
開啟（）：無效，
關閉（）：無效，
}> {}
</代號></pre>
<p>另一個接近的嘗試調整是：</p>
<pre class="lang-js Prettyprint-override"><code>匯出介面 MenuStore 擴充 Store<string, {
isOpen: RemovableRef,
切換（力？：布林值）：無效，
開啟（）：無效，
關閉（）：無效，
}> {}
</代號></pre>
<p>這導致使用時出現此錯誤，但中元件沒有錯誤</p>
型別 _StoreWithState & UnwrapRef<狀態> & _StoreWithGetters<{}> & {toggle(force?: boolean): void, close(): void, open(): void} & PiniaCustomProperties & PiniaCustomStateProperties<狀態>無法分配給類型 MenuStore ... 類型 PiniaCustomStateProperties;不可分配給類型 MenuStore
； 