Übergeben Sie Pinia Store als Requisite mit Vue3 und TypeScript

Question

Ich verwende Typescript, Pinia und Vue3 und habe eine MenuButton-Komponente und möchte in der Lage sein, den Pinia-Speicher/Ausblenden für den Menü-Öffnungszustand und die anzuzeigende Aktion zu übergeben . Es gibt einige verschiedene Menüs in der Anwendung, daher möchte ich sie übergeben können und alle dieselbe Factory verwenden, um den Shop zu definieren. Ich versuche herauszufinden, wie ich das alles mit Typoskript zum Laufen bringen kann.

<code>// nav.store.ts

import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
Importtyp {RemovableRef} aus „@vueuse/core“;

Exportschnittstelle MenuStore {
    isOpen: RemoveableRef<boolean>,
    toggle(force?: boolean) : void,
    open(): void,
    close(): void,
}

Schnittstellenstatus {
    isOpen: RemoveableRef<boolean>;
}

Funktion menuStoreFactory(id: string) {
    return defineStore(id, {
        state: () : State => ({
            isOpen: useStorage(`${id}-open`, false),
        }),

        Aktionen: {
            toggle(force?: boolean) {
                this.isOpen = force != undefiniert ? force : !this.isOpen;
            },

            offen() {
                this.isOpen = true;
            },

            schließen() {
                this.isOpen = false;
            }
        }
    });
}

export const useMainMenuStore = menuStoreFactory('mainMenu');

export const useMobileMenuStore = menuStoreFactory('mobileMenu');
</code>

<code>// Setup-Skript für die Menüschaltflächenkomponente

import { MenuIcon, MenuLeftIcon } aus "@/icons";
Importtyp { MenuStore } aus "@/modules/nav/nav.store";

Schnittstelle Requisiten {
    Controller: MenuStore
}

const props = defineProps<Props>();
</code>

Dann ist die Verwendung ganz einfach:

<code><template>
    <MenuButton
        :controller="mainMenu"
    ></MenuButton>
</template>
<script setup lang=ts">
    const mainMenu = useMainMenuStore();
</script>
</code>

In der aktuellen Schnittstelle erhalte ich eine Fehlermeldung über die Nichtübereinstimmung der Requisiten. Nach einiger Recherche habe ich die Schnittstelle wie folgt geändert, wodurch der Verwendungsfehler behoben wurde, aber dann wurde der Fehler in der Komponente toggle() /code> für code>isOpen< wurde nicht aufgelöst.

<code>Exportschnittstelle MenuStore erweitert PiniaCustomStateProperties<{
    isOpen: AbnehmbareRef<boolean>,
    toggle(force?: boolean) : void,
    open(): void,
    close(): void,
}> {}
</code>

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

<code>export interface MenuStore erweitert Store<string, {
    isOpen: RemoveableRef<boolean>,
    toggle(force?: boolean) : void,
    open(): void,
    close(): void,
}> {}
</code>

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

Type _StoreWithState<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void} > &Ampere; UnwrapRef<State> &Ampere; _StoreWithGetters<{}> &Ampere; {toggle(force?: boolean): void, close(): void, open(): void} & PiniaCustomProperties<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void}> &Ampere; PiniaCustomStateProperties<State> kann nicht dem Typ MenuStore zugewiesen werden ...   Typ PiniaCustomStateProperties<State> kann nicht dem Typ MenuStore

zugewiesen werden.

Answer 1

您的问题似乎主要是关于您需要的类型/接口，所以我会回答这个问题。

您可以简单地使用返回的存储的类型，而不是自己编写类型。

您有一个工厂函数，它返回 defineStore 的返回值，它本身就是一个返回存储的函数。因此，可以使用 typeof 获取工厂函数的类型，然后使用 TypeScript 的 ReturnType 帮助器深入了解返回类型，从而找到存储的类型。

以下应该是您所需要的：

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

细分：

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

• A：获取工厂函数的类型。
• B：获取工厂函数的返回类型，即defineStore的返回值。这本身就是一个返回存储的函数。
• C: 获取该函数的返回类型。这是商店本身的类型。