Lulus Pinia Store sebagai Prop menggunakan Vue3 dan TypeScript

Question

Saya menggunakan Typescript, Pinia dan Vue3, dan mempunyai komponen MenuButton 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.

<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>

<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>

Maka penggunaan adalah sangat mudah:

<kod><template>
    <Button Menu
        :controller="Menu utama"
    ></MenuButton>
</template>
<penyediaan skrip lang=ts">
    const mainMenu = useMainMenuStore();
</skrip>
</code>

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 toggle() dan MenuButton /code> untuk kod>isOpen<

<kod>antara muka eksport MenuStore memanjangkan PiniaCustomStateProperties<{
    isOpen: RemovableRef<boolean>,
    togol(force?: boolean): batal,
    buka (): tidak sah,
    tutup(): kosong,
}> {}
</code>

另一个接近的尝试调整是：

<kod>antara muka eksport MenuStore memanjangkan<rentetan Kedai, {
    isOpen: RemovableRef<boolean>,
    togol(force?: boolean): batal,
    buka (): tidak sah,
    tutup(): kosong,
}> {}
</code>

这导致了使用时出现此错误，但组件中没有错误

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

Answer 1

Soalan anda nampaknya kebanyakannya mengenai jenis/antara muka yang anda perlukan, jadi saya akan menjawabnya.

Anda hanya boleh menggunakan jenis yang disimpan yang dikembalikan dan bukannya menulis jenis itu sendiri.

Anda mempunyai fungsi kilang yang kembali defineStore 的返回值，它本身就是一个返回存储的函数。因此，可以使用 typeof 获取工厂函数的类型，然后使用 TypeScript 的 ReturnType Pembantu menggerudi ke dalam jenis pemulangan untuk mencari jenis yang disimpan.

Yang berikut sepatutnya menjadi apa yang anda perlukan:

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

Segmentasi:

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

• A: Dapatkan jenis fungsi kilang.
• B: Dapatkan jenis pulangan fungsi kilang, iaitu nilai pulangan defineStore. Ini sendiri adalah fungsi yang mengembalikan storan.
• C: Dapatkan jenis pemulangan fungsi ini. Ini adalah jenis kedai itu sendiri.