I'm navigating the process of setting up a Vuex 4 Store with Typescript and Vue3, despite having limited experience with typescript.
Following the Vuex Tutorial for the initial setup, I almost entirely copy-pasted the code. The only difference is that in my State interface, I included a key of type Station.
An error has surfaced:
TS2345: Argument of type '{ station: {}; isOverlayActive: boolean; }' is not assignable to parameter of type 'StoreOptions<State>'.
Object literal may only specify known properties, and 'station' does not exist in type 'StoreOptions<State>'.
This is what my Station interface looks like:
export default interface Station {
uuid: string;
name: string;
teaser: {
src: string;
title: string;
};
event: {
uuid: string;
name: string;
logo: {
src: string;
title: string;
};
};
logo: {
src: string;
title: string;
};
theme: {
mainColor: string;
textColor: string;
};
}
and this snippet is from my index.ts file where I define the store and encounter the error:
import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import Station from "@/interfaces/station";
export interface State {
station: Station;
isOverlayActive: boolean;
}
export const key: InjectionKey<Store<State>> = Symbol();
export const store = createStore<State>({
station: {}, // this is where the compiler indicates the error
isOverlayActive: false,
});
export function useStore(): Store<State> {
return baseUseStore(key);
}
Despite my attempts to troubleshoot by changing the station property to different types within the Store interface and store object, the same error persists.
Could someone point out where I might be going wrong? My ultimate aim is to have a well-typed store.