Pinia + TS:将存储类型作为函数参数。

huangapple go评论60阅读模式
英文:

Pinia + TS: type of store as an argument to a function

问题

I have several different pinia stores that share a bunch of functions. For example:

const storeOne = defineStore('a', () => {
    const foo = () => alert('store a');
    const bar = () => alert('bar');
    const a = ref(null);
    return {
        foo,
        bar,
        a
    }
});

const storeTwo = defineStore('b', () => {
    const foo = () => alert('store b');
    const foobar = () => alert('foobar');
    const b = ref(null);
    return {
        foo,
        foobar,
        b
    }
})

both stores will have a function foo in this case. The rest can basically be ignored in that scenario, it's just an example.

I have a function that needs to call foo() and I would like to pass a store in that function but I don't know how I could type this properly. My current attempts, for example, were:

type StoreCollection = ReturnType<typeof storeTwo | typeof storeOne>
type PickedStoreCollection = Pick<StoreCollection, 'foo'>
const callStoreFunction = (store: PickedStoreCollection) => {
    store.foo(); // works great -> this will know the correct store
}

callStoreFunction(storeOne); // TS error: types are incompatible
callStoreFunction(storeTwo); // TS error: types are incompatible

I made a basic example here sandbox link in the main.ts file.

I know I could easily cast every call like this to:

callStoreFunction(storeTwo as unknown as PickedStoreCollection);

But I would really like to avoid this.

英文:

I have several different pinia stores that share a bunch of functions. For example

const storeOne = defineStore(&#39;a&#39;, () =&gt; {
    const foo = () =&gt; alert(&#39;store a&#39;);
    const bar = () =&gt; alert(&#39;bar&#39;);
    const a = ref(null);
    return {
        foo,
        bar,
        a
    }
});

const storeTwo = defineStore(&#39;b&#39;, () =&gt; {
    const foo = () =&gt; alert(&#39;store b&#39;);
    const foobar = () =&gt; alert(&#39;foobar&#39;);
    const b = ref(null);
    return {
        foo,
        foobar,
        b
    }
})

both stores will have a function foo in this case. The rest can basically be ignored in that scenario, it's just an example.

I have a function that needs to call foo() and I would like to pass a store in that function but I don't know how I could type this properly. My current attempts for example were:

type StoreCollection = ReturnType&lt;typeof storeTwo| typeof storeOne&gt;
type PickedStoreCollection = Pick&lt;StoreCollection, &#39;foo&#39;&gt;
const callStoreFunction = (store: PickedStoreCollection) =&gt; {
    store.foo(); // works great -&gt; this will know the correct store
}

callStoreFunction(storeOne); // TS error: types a incompatible
callStoreFunction(storeTwo); // TS error: types a incompatible

I made a basic example here https://codesandbox.io/p/sandbox/relaxed-scooby-ubncqg?file=%2Fsrc%2Fmain.ts%3A20%2C1 in the main.ts file

I know I could easily cast every call like this to

callStoreFunction(storeTwo as unknown as PickedStoreCollection);

But I would really like to avoid this.

答案1

得分: 2

You missed the store creation

defineStore 返回的不是 store: Store,而是 useStore: () =&gt; Store

callStoreFunction(storeOne())
// or renamed
const storeTwo = useStoreTwo();
callStoreFunction(storeTwo)
英文:

You missed the store creation

defineStore resurns not a store: Store, but a useStore: () =&gt; Store

callStoreFunction(storeOne())
// or renamed
const storeTwo = useStoreTwo();
callStoreFunction(storeTwo)

huangapple
  • 本文由 发表于 2023年5月10日 15:00:42
  • 转载请务必保留本文链接:https://go.coder-hub.com/76215703.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定