Answer

Great question—typed Vuex can feel really clunky when you're new to TypeScript, especially with cross-module calls and namespace conflicts. Let's break down solutions to both your core issues step by step:

---

1. Type-Safe Cross-Module Calls (Getters/Actions/Mutations)

Your existing solution for root getters is spot-on—let's expand that to cover actions and mutations too, so you don't have to import multiple module instances.

Getters (Your Working Solution, Refined)

First, keep merging all module getter interfaces into a single RootGetters in your store's root file:

// ./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 {}

Then update your module's AugmentedActionContext to include typed rootGetters:

// ./some-store/module.ts
import { RootGetters } from '@/store';

type AugmentedActionContext = {
  // Module-specific commit
  commit<K extends keyof Mutations>(key: K, payload: Parameters<Mutations[K]>[1]): ReturnType<Mutations[K]>;
  // Module-specific getters
  getters: { [K in keyof Getters]: ReturnType<Getters[K]> };
  // Typed root getters (all modules)
  rootGetters: { [K in keyof RootGetters]: ReturnType<RootGetters[K]> };
  // Module-specific dispatch
  dispatch<K extends keyof Actions>(key: K, payload?: Parameters<Actions[K]>[1], options?: DispatchOptions): ReturnType<Actions[K]>;
} & Omit<ActionContext<State, RootState>, 'commit' | 'getters' | 'dispatch' | 'rootGetters'>;

Now you can safely call any module's getter via rootGetters with full type hints.

Actions & Mutations (Extending Your Approach)

To add type safety for cross-module actions and mutations, extend the same pattern to RootActions and RootMutations:

Step 1: Create Root Action/Mutation Interfaces

// ./store/index.ts
import { Actions as AxiosActions, Mutations as AxiosMutations } from '@/store/modules/axios/axios';
import { Actions as SiteSettingsActions, Mutations as SiteSettingsMutations } from '@/store/modules/site_settings/site_settings';
import { Actions as UserActions, Mutations as UserMutations } from '@/store/modules/user/user';

export interface RootActions extends AxiosActions, SiteSettingsActions, UserActions {}
export interface RootMutations extends AxiosMutations, SiteSettingsMutations, UserMutations {}

Step 2: Update AugmentedActionContext for Global Calls

Modify your module's context to support both module-specific and global (cross-module) dispatch/commit:

// ./some-store/module.ts
import { RootActions, RootMutations } from '@/store';

type AugmentedActionContext = {
  // Module-specific commit
  commit<K extends keyof Mutations>(key: K, payload: Parameters<Mutations[K]>[1]): ReturnType<Mutations[K]>;
  // Global commit (supports all modules' mutations)
  commit<K extends keyof RootMutations>(key: K, payload: Parameters<RootMutations[K]>[1], options?: CommitOptions): ReturnType<RootMutations[K]>;
  
  getters: { [K in keyof Getters]: ReturnType<Getters[K]> };
  rootGetters: { [K in keyof RootGetters]: ReturnType<RootGetters[K]> };
  
  // Module-specific dispatch
  dispatch<K extends keyof Actions>(key: K, payload?: Parameters<Actions[K]>[1], options?: DispatchOptions): ReturnType<Actions[K]>;
  // Global dispatch (supports all modules' actions)
  dispatch<K extends keyof RootActions>(key: K, payload?: Parameters<RootActions[K]>[1], options?: DispatchOptions): ReturnType<RootActions[K]>;
} & Omit<ActionContext<State, RootState>, 'commit' | 'getters' | 'dispatch' | 'rootGetters'>;

Now you can call cross-module actions/mutations directly in your module's actions with full type safety, no extra imports needed:

export const actions: ActionTree<State, RootState> & Actions = {
  [ActionTypes.doSomething]({ commit, rootGetters, dispatch }) {
    // Call another module's getter
    const userToken = rootGetters.getUserToken;
    // Call another module's action
    await dispatch(UserActionTypes.fetchUserProfile, userToken);
    // Call another module's mutation
    commit(SiteSettingsMutationTypes.setTheme, 'dark');
  },
};

---

2. Adding Namespaces Without Breaking Type Safety

Namespaces are critical for large stores to avoid naming conflicts, and we can adapt your existing template to support them without losing type hints. Here's how:

Step 1: Enable Namespaces in Modules

First, set namespaced: true in your module definition:

export const store: Module<State, RootState> = {
  state,
  mutations,
  getters,
  actions,
  namespaced: true, // Enable this
};

Step 2: Add Namespace Prefixes to Root Types

Vuex uses moduleName/actionName syntax for namespaced calls, so we need to reflect this in our root interfaces using TypeScript's mapped types.

First, create helper types to add namespace prefixes:

// ./store/index.ts
type NamespacedActions<Namespace extends string, Actions> = {
  [K in keyof Actions as `${Namespace}/${string & K}`]: Actions[K];
};

type NamespacedMutations<Namespace extends string, Mutations> = {
  [K in keyof Mutations as `${Namespace}/${string & K}`]: Mutations[K];
};

type NamespacedGetters<Namespace extends string, Getters> = {
  [K in keyof Getters as `${Namespace}/${string & K}`]: Getters[K];
};

Then update your root interfaces to use these helpers (define each module's namespace as a constant to avoid typos):

// ./store/modules/axios/axios.ts
export const MODULE_NAMESPACE = 'axios' as const;

// ./store/index.ts
import { MODULE_NAMESPACE as AXIOS_NS, Actions as AxiosActions, Getters as AxiosGetters, Mutations as AxiosMutations } from '@/store/modules/axios/axios';
import { MODULE_NAMESPACE as SETTINGS_NS, Actions as SiteSettingsActions, Getters as SiteSettingsGetters, Mutations as SiteSettingsMutations } from '@/store/modules/site_settings/site_settings';
import { MODULE_NAMESPACE as USER_NS, Actions as UserActions, Getters as UserGetters, Mutations as UserMutations } from '@/store/modules/user/user';

export interface RootActions 
  extends NamespacedActions<typeof AXIOS_NS, AxiosActions>,
          NamespacedActions<typeof SETTINGS_NS, SiteSettingsActions>,
          NamespacedActions<typeof USER_NS, UserActions> {}

export interface RootMutations
  extends NamespacedMutations<typeof AXIOS_NS, AxiosMutations>,
          NamespacedMutations<typeof SETTINGS_NS, SiteSettingsMutations>,
          NamespacedMutations<typeof USER_NS, UserMutations> {}

export interface RootGetters
  extends NamespacedGetters<typeof AXIOS_NS, AxiosGetters>,
          NamespacedGetters<typeof SETTINGS_NS, SiteSettingsGetters>,
          NamespacedGetters<typeof USER_NS, UserGetters> {}

Step 3: Update Cross-Module Calls

Now, when calling cross-module actions/mutations/getters, use the namespace-prefixed keys:

export const actions: ActionTree<State, RootState> & Actions = {
  [ActionTypes.doSomething]({ commit, rootGetters, dispatch }) {
    // Namespaced getter call
    const userToken = rootGetters['user/getUserToken'];
    // Namespaced action call
    await dispatch('user/fetchUserProfile', userToken);
    // Namespaced mutation call
    commit('site_settings/setTheme', 'dark');
  },
};

Migrating Without Breaking Existing Code

If you're worried about breaking existing logic, you can:

• Enable namespaces one module at a time
• Update calls to that module to use the namespace prefix
• Adjust the root interfaces incrementally

This way, you can avoid a full rewrite and test changes as you go.

---

Final Notes

Your initial template is solid for Vuex 4—until Vuex 5 (Pinia 2) becomes the standard, this is one of the cleanest typed approaches around. The key is centralizing your root types to avoid redundant code and keep cross-module calls type-safe.

内容的提问来源于stack exchange，提问作者Komi