Vue3 と TypeScript を使用して Ponia ストアを Prop として渡します

Question

Typescript、Ponia、Vue3 を使用しており、MenuButton コンポーネントがあり、メニューを開いている状態と表示するアクションに対して Ponia のストレージ/非表示を渡すことができるようにしたいと考えています。 。アプリケーションにはいくつかの異なるメニューがあるため、それらを渡して、すべて同じファクトリーを使用してストアを定義できるようにしたいと考えています。これらすべてを typescript で動作させる方法を見つけようとしています。

<code>// nav.store.ts

import {defineStore} から "pinia";
import { useStorage } から "@vueuse/core";
タイプ { RemovableRef } を "@vueuse/core" からインポートします。

エクスポートインターフェイス MenuStore {
    isOpen: RemovableRef<boolean>,
    トグル(力?: ブール値) : void,
    open(): 無効、
    close(): 無効、
}

インターフェイスの状態 {
    isOpen: RemovableRef<boolean>;
}

関数 menuStoreFactory(id: 文字列) {
    returndefineStore(id, {
        状態: () : 状態 => ({
            isOpen: useStorage(`${id}-open`, false),
        })、

        行動： {
            トグル(力?: ブール値) {
                this.isOpen = 強制 != 未定義 ? 強​​制 : !this.isOpen;
            }、

            開ける（） {
                this.isOpen = true;
            }、

            近い（） {
                this.isOpen = false;
            }
        }
    });
}

エクスポート const useMainMenuStore = menuStoreFactory('mainMenu');

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

<code>// メニュー ボタン コンポーネントのセットアップ スクリプト

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

インターフェイスの小道具 {
    コントローラ: メニューストア
}

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

使用方法は非常に簡単です。

<コード><テンプレート>
    <メニューボタン
        :controller="メインメニュー"
    ></メニューボタン>
</テンプレート>
<スクリプト設定 lang=ts">
    const mainMenu = useMainMenuStore();
</スクリプト>
</code>

現在のインターフェースでは、プロパティの不一致エラーが発生します。いくつかの調査の後、インターフェイスを次のように変更し、使用上のエラーを修正しましたが、MenuButton コンポーネントで toggle() と < をスローしました。 code>isOpen< の /code> は解決されていません。

<code>エクスポート インターフェイス MenuStore extends PoniaCustomStateProperties<{
    isOpen: RemovableRef<boolean>,
    トグル(力?: ブール値) : void,
    open(): 無効、
    close(): 無効、
}>> {}
</code>

もう一つの接近の説明は次のとおりです：

<code>エクスポート インターフェイス MenuStore extends Store<string, {
    isOpen: RemovableRef<boolean>,
    トグル(力?: ブール値) : void,
    open(): 無効、
    close(): 無効、
}>> {}
</code>

これにより、使用時にこのような問題が発生しますが、コンポーネントには問題はありません

Type _StoreWithState<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void} > & UnwrapRef<State> & _StoreWithGetters<{}> & {toggle(force?: boolean): void, close(): void, open(): void} & PoniaCustomProperties<string, State, {}, {toggle(force?: boolean): void, close(): void, open(): void}> & PoniaCustomStateProperties<State>は、MenuStore タイプに割り当てることはできません ... PoniaCustomStateProperties<State> と入力します。タイプ MenuStore

には割り当てられません。

Answer 1

あなたの質問は主に必要な型/インターフェイスに関するもののようですので、それに答えます。

型を自分で記述する代わりに、返された格納された型を単純に使用できます。

defineStore の戻り値を返すファクトリ関数があります。これ自体がストアを返す関数です。したがって、typeof を使用してファクトリ関数の型を取得し、TypeScript の ReturnType ヘルパーを使用して戻り値の型をドリルダウンして、格納されている型を見つけることができます。

次のものが必要です:

リーリー

セグメンテーション:

リーリー

• A: ファクトリ関数のタイプを取得します。
• B: ファクトリ関数の戻り値の型、つまり defineStore の戻り値を取得します。これ自体はストレージを返す関数です。
• C: この関数の戻り値の型を取得します。お店自体もそういうタイプです。