How to properly typecast Pinia stores when using them with TypeScript & vue-facing-decorator ?

[Werns]

Hello! I'm migrating from Vue 2 to 3 and replacing Vuex with Pinia. My project was written with vue-class-component and vue-property-decorator, so I'm also switching to vue-facing-decorator. However, I'm running into a problem making these 2 libraries work together with Typescript.

According to vfd's documentation, the way to inject composables is to use @Setup, so I'm trying to do that for Pinia stores but I'm running into trouble assigning a type for the the actualized store.

import { defineStore, Store } from "pinia";

interface MyStoreState {
    foo: string,
}

interface MyStoreGetters {
    fooIsBar(): boolean;
}

interface MyStoreActions {
    async fetchFoo(): Promise<string>;
}

const useMyStore = defineStore("myStore", {
    state: () => {
        foo: "bar"
    } as MyStoreState,
    getters: {
        fooIsBar(): boolean {
            return this.foo === "bar";
        }
    } as MyStoreGetters, // throws an error casting to MyStoreGetters
    actions: {
        async fetchFoo(): Promise<string> {
            this.foo = await fetch("foo");
            return this.foo;
        }
    } as MyStoreActions, // throws an error casting to MyStoreGetters
});

type MyStore = Store<"myStore", MyStoreState, MyStoreGetters, MyStoreActions>;

import { Component, Vue, Setup, toNative } from "vue-facing-decorator";

@Component({})
class MyVueComponent extends Vue {
    @Setup(() => useMyStore())
    public myStore!: MyStore;
}

export default toNative(MyVueComponent);

Per the in-line comments, this throws various errors. If I get rid of the casting, it technically compiles but it's not quite right and there's no enforcement that the getters/actions defined in the defineStore() options are actually implemented the MyStoreGetters and MyStoreActions interfaces.

I have also tried doing something like this, but I get an error that it's creating a store before Pinia is initialized.

const useMyStore = defineStore("myStore", {
    state: () => {
        foo: "bar"
    },
    getters: {
        fooIsBar(): boolean {
            return this.foo === "bar";
        }
    },
    actions: {
        async fetchFoo(): Promise<string> {
            this.foo = await fetch("foo");
            return this.foo;
        }
    },
});

const testStore = useMyStore();
type MyStore = typeof testStore;

What's the "proper" way of doing this? Or is there one?

[Werns]

Of course, not even an hour after asking and I've found what might be the solution. Should I be worried that the jsdocs for _GettersTree says it's for internal use only, though?

import { defineStore, _GettersTree, Store } from "pinia";

interface MyStoreState {
    foo: string,
}

interface MyStoreGetters extends _GettersTree<MyStoreState> {
    fooIsBar(): boolean;
}

interface MyStoreActions {
    async fetchFoo(): Promise<string>;
}

const useMyStore = defineStore<"myStore", MyStoreState, MyStoreGetters, MyStoreActions>("myStore", {
    state: () => {
        foo: "bar"
    },
    getters: {
        fooIsBar(): boolean {
            return this.foo === "bar";
        }
    },
    actions: {
        async fetchFoo(): Promise<string> {
            this.foo = await fetch("foo");
            return this.foo;
        }
    },
});

type MyStore = Store<"myStore", MyStoreState, MyStoreGetters, MyStoreActions>;

[daphnesmit]

The _GettersTree works but indeed sounds like a really weird external typeface API to use like this.

[Werns]

I agree, but I've been using it without issue for a few months now. 🤷