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

[Werns]

Hello! As a forewarning, I have also asked this in the Pinia github Discussions in case this repo is not the right place to ask.

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. This was definitely the wrong repo to ask, so I'll close this. For future researchers, head over to: vuejs/pinia#2573