In my Vue 3 project with TypeScript and Vuex4, I am currently using a boilerplate method for declaring store modules in vuex with TypeScript. The code snippet I am using can be found at:
//#region Store
export const state: State = {
stateVar: null,
isError: false,
};
export const getters: GetterTree<State, RootState> & Getters = {
getStateVar: state => state.stateVar,
getIsError: state => state.isError,
};
...
//#endregion Store Type & ModuleAlthough this approach works, it results in a lot of repetition. I'm wondering if there is a better solution available until Vuex 5 is released. Since I'm new to TypeScript, I used this boilerplate as a template to type my store.
I have two main questions:
- How can I access other module's getters, actions, or mutations within a specific module? Is there a way to utilize RootGetters and RootActions effectively without importing the store from multiple modules?
- How can I namespace these modules to prevent naming clashes in larger stores? This would make it easier to use them in other modules.
If you have any suggestions or solutions to offer, even partial ones, I'm open to trying them out as I'm feeling a bit lost.
**UPDATE:** The accepted answer explains how to use allActionTypes|MutationTypes by importing that instead of submodule-specific ActionTypes|MutationTypes when calling dispatch or commit.
As for namespacing, feel free to share your thoughts on this ongoing topic.
The getters were not included in the answer, so after some trial and error, here is what I ended up doing:
//./store/index.ts
import {
Getters as AxiosGetters,
} from '@/store/modules/axios/axios';
import {
Getters as SiteSettingsGetters,
} from '@/store/modules/site_settings/site_settings';
import {
Getters as UserGetters
} from '@/store/modules/user/user';
export interface RootGetters extends AxiosGetters, SiteSettingsGetters, UserGetters {}
...