<p>Saya menggunakan Typescript, Pinia dan Vue3, dan mempunyai komponen <kod>MenuButton</code> dan saya mahu dapat menghantar storan/sembunyikan Pinia untuk keadaan terbuka menu dan tindakan untuk ditunjukkan . Terdapat beberapa menu berbeza dalam aplikasi jadi saya ingin dapat memasukkannya dan meminta mereka semua menggunakan kilang yang sama untuk menentukan kedai. Saya cuba memikirkan cara untuk membuat semua ini berfungsi dengan skrip taip. </p> <pre class="lang-js prettyprint-override"><code>// nav.store.ts import { defineStore } dari "pinia"; import { useStorage } daripada "@vueuse/core"; jenis import { RemovableRef } daripada "@vueuse/core"; antara muka eksport MenuStore { isOpen: RemovableRef<boolean>, togol(force?: boolean): batal, buka (): tidak sah, tutup(): kosong, } antara muka Negeri { isOpen: RemovableRef<boolean>; } menu fungsiStoreFactory(id: string) { kembalikan defineStore(id, { nyatakan: () : Nyatakan => isOpen: useStorage(`${id}-open`, false), }), tindakan: { togol(force?: boolean) { this.isOpen = force != undefined force : !this.isOpen; }, buka() { this.isOpen = benar; }, tutup() { this.isOpen = palsu; } } }); } export const useMainMenuStore = menuStoreFactory('mainMenu'); export const useMobileMenuStore = menuStoreFactory('mobileMenu'); </code></pre> <pre class="lang-js prettyprint-override"><kod>// skrip persediaan untuk komponen butang menu import { MenuIcon, MenuLeftIcon } daripada "@/icons"; jenis import { MenuStore } daripada "@/modules/nav/nav.store"; antara muka Props { pengawal: MenuStore } const props = defineProps<Props>(); </code></pre> <p>Maka penggunaan adalah sangat mudah:</p> <pre class="lang-html prettyprint-override"><kod><template> <Button Menu :controller="Menu utama" ></MenuButton> </template> <penyediaan skrip lang=ts"> const mainMenu = useMainMenuStore(); </skrip> </code></pre> <p>Dalam antara muka semasa, saya menerima ralat ketidakpadanan prop. Selepas beberapa penyelidikan, saya menukar antara muka kepada yang berikut, yang membetulkan ralat penggunaan, tetapi kemudian melemparkan <code>toggle()</code> dan <code>MenuButton</code> /code> untuk kod>isOpen<</p> <pre class="lang-js prettyprint-override"><kod>antara muka eksport MenuStore memanjangkan PiniaCustomStateProperties<{ isOpen: RemovableRef<boolean>, togol(force?: boolean): batal, buka (): tidak sah, tutup(): kosong, }> {} </code></pre> <p>另一个接近的尝试调整是：</p> <pre class="lang-js prettyprint-override"><kod>antara muka eksport MenuStore memanjangkan<rentetan Kedai, { isOpen: RemovableRef<boolean>, togol(force?: boolean): batal, buka (): tidak sah, tutup(): kosong, }> {} </code></pre> <p>这导致了使用时出现此错误，但组件中没有错误</p> <pre class="brush:php;toolbar:false;">Type _StoreWithState<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void} > & UnwrapRef<Negeri> & _StoreWithGetters<{}> & {toggle(force?: boolean): void, close(): void, open(): void} & PiniaCustomProperties<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void}> & PiniaCustomStateProperties<Negeri> tidak boleh ditugaskan untuk menaip MenuStore ...   Taip PiniaCustomStateProperties<State> tidak boleh ditugaskan untuk menaip MenuStore</pre></p>

export type MenuStore = ReturnType<ReturnType<typeof menuStoreFactory>>

ReturnType<                 // C
  ReturnType<               // B
    typeof menuStoreFactory // A
  >
>