My research on the topic has primarily led me to this informative article.
I am currently working on setting up a store with 2 modules.
export interface RootState {
/** root state props **/
}
const store: StoreOptions<RootState> = {
modules: {
foo,
bar,
},
};
export default new Vuex.Store<RootState>(store);
I have created two modules:
export interface FooState {
//(...)
}
export const foo: Module<FooState, RootState> = {
//(...)
};
export interface BarState {
//(...)
}
export const bar: Module<BarState, RootState> = {
//(...)
};
Everything was going smoothly until I encountered a situation where I needed a getter from the foo module to access the bar state:
export const getters: GetterTree<FooState, RootState> = {
getInfo: (state, {}, rootState) => number {
const value = rootState.bar.somevalue;
//(...)
},
};
However, I received a linting error stating that rootState did not have a bar property. After some consideration, I resolved the issue by modifying the original RootState interface:
export interface RootState {
/** root state props **/
foo: FooState;
bar: BarState;
}
This modification fixed the problem and enhanced the IDE intellisense functionality.
Is it appropriate to add all modules into the RootState interface used by StoreOptions?
Additionally, there appears to be limited documentation available on these typed interfaces (StoreOptions, Module, GetterTree, etc): Is Vuex sufficiently developed to be utilized with typescript?
Edit: I neglected to mention that I still need to cast `this.$store` when accessing the store from a component (though this can potentially be minimized with vuex-class). There is an unanswered inquiry on this matter in a question thread. Until a solution arises, is this the only workaround available?