title: How to use other store module getters/actions/mutations with Vuex 4 and TypeScript
body: <p>I am working on a Vue 3 project with TypeScript and Vuex4.
  Right now I am using a boilerplate declaration method for every store module in in vuex with TS.
  Which looks like this:
  Or if my code is not readable enough, here is what i used to guide me: <a href="https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230" rel="nofollow noreferrer">https://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//#region Store
  export const state: State = {
    stateVar: null,
    isError: false,
  };
  
  export const getters: GetterTree&lt;State, RootState&gt; &amp; Getters = {
    getStateVar: state =&gt; state.stateVar,
    getIsError: state =&gt; state.isError,
  };
  
  export const mutations: MutationTree&lt;State&gt; &amp; Mutations = {
    [ModuleMutationTypes.setStateVar](state: State, payload: StateVarType) {
      state.stateVar = payload;
    },
    [ModuleMutationTypes.setIsError](state: State, payload: boolean) {
      state.isError = payload;
    },
  };
  
  export const actions: ActionTree&lt;State, RootState&gt; &amp; Actions = {
    async [ModuleActionTypes.doRequest]({ commit, getters }) {
      //do something and commit it 
      // for example here i would like to access the getters or action from another store how is that possible 
      commit(ModuleMutationTypes.setStateVar, someValue);
    },
  };
  //#endregion Store
  
  //#region Store Type
  export type State = {
    someStateVar: SomeStateVarType;
    isError: boolean;
  };
  
  export type Getters = {
    getStateVar(state: State): someStateVarType;
    getIsError(state: State): boolean;
  };
  
  export type Mutations&lt;S = State&gt; = {
    [ModuleMutationTypes.setStateVar](state: S, payload: SomeSTateVarType): void;
    [ModuleMutationTypes.setIsError](state: S, payload: boolean): void;
  };
  
  export interface Actions {
    [ModuleActionTypes.doRequest](context: AugmentedActionContext): Promise&lt;any&gt;;
  }
  
  type AugmentedActionContext = {
    commit&lt;K extends keyof Mutations&gt;(key: K, payload: Parameters&lt;Mutations[K]&gt;[1]): ReturnType&lt;Mutations[K]&gt;;
    getters: {
      [K in keyof Getters]: ReturnType&lt;Getters[K]&gt;;
    };
    dispatch&lt;K extends keyof Actions&gt;(
      key: K,
      payload?: Parameters&lt;Actions[K]&gt;[1],
      options?: DispatchOptions
    ): ReturnType&lt;Actions[K]&gt;;
  } &amp; Omit&lt;ActionContext&lt;State, RootState&gt;, 'commit' | 'getters' | 'dispatch'&gt;;
  //#endregion Store Type
  
  //#region Store Module
  export type ModuleStore&lt;S = State&gt; = Omit&lt;VuexStore&lt;S&gt;, 'getters' | 'commit' | 'dispatch'&gt; &amp; {
    commit&lt;K extends keyof Mutations, P extends Parameters&lt;Mutations[K]&gt;[1]&gt;(
      key: K,
      payload: P,
      options?: CommitOptions
    ): ReturnType&lt;Mutations[K]&gt;;
  } &amp; {
    dispatch&lt;K extends keyof Actions&gt;(
      key: K,
      payload?: Parameters&lt;Actions[K]&gt;[1],
      options?: DispatchOptions
    ): ReturnType&lt;Actions[K]&gt;;
  } &amp; {
    getters: {
      [K in keyof Getters]: ReturnType&lt;Getters[K]&gt;;
    };
  };
  
  export const store: Module&lt;State, RootState&gt; = {
    state,
    mutations,
    getters,
    actions,
    //namespaced also breaks everything
    // But without it, a bigger store might have clashes in namings
    // namespaced: true,
  };
  //#endregion Store Type &amp; Module</code></pre>
  </div>
  </div>
  </p>
  <p>Now as you see this makes me repeat lots and lots of stuff, but until Vuex 5 i dont know if there is any other better solution.
  Also I am very new to TypeScript, I just used this boilerplate as a template to make my store typed.</p>
  <p>My main questions are:</p>
  <ol>
  <li>How can i access other module's getters or actions or mutations in a particular module, i would even be happy if i could get the RootGetters and RootActions working, but i tried it but i could not make it work, but as i mentioned im a new to this, so maybe i didnt know better. Or is it just that easy that i import this exported const store: Module&lt;State, RootState&gt; ... that would make my code vene clunkier as when i want to use getters from 4 diffrent modules i need to import all 4?</li>
  <li>How can i make these modules namespaced, i have some quite sizeable stores, talking about like 500 lines and lots of stuff going on, so it would be nice to not have names clash? Maybe that would make it easier to use them in other modules?</li>
  </ol>
  <p>Even if you cant provide a complete answer i am happy to try every suggestion you guys have since i am quite lost.</p>
  <br>
  **UPDATE:**
  You can see the accepted answer on how to use the allAction|MutationTypes, just import that instead of the submodule specific Action|MutationTypes and use that when calling dispatch or commit.
  <p>As for name-spacing, well that's still an open-ended topic, feel free to share.</p>
  <p>As the answer did not include the getters, after some trial and error I ended up doing this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//./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 {}
  
  
  //./some-store/module.ts
  import {RootGetters} from '@/store';
  
  type AugmentedActionContext = {
    commit&lt;K extends keyof Mutations&gt;(key: K, payload: Parameters&lt;Mutations[K]&gt;[1]): ReturnType&lt;Mutations[K]&gt;;
    getters: {
      [K in keyof Getters]: ReturnType&lt;Getters[K]&gt;;
    };
    rootGetters: {
      [K in keyof RootGetters]: ReturnType&lt;RootGetters[K]&gt;;
    };
    dispatch&lt;K extends keyof Actions&gt;(
      key: K,
      payload?: Parameters&lt;Actions[K]&gt;[1],
      options?: DispatchOptions
    ): ReturnType&lt;Actions[K]&gt;;
  } &amp; Omit&lt;ActionContext&lt;State, RootState&gt;, 'commit' | 'getters' | 'dispatch' | 'rootGetters'&gt;;
  
  export interface Actions {
    [ActionTypes.doSomething](context: AugmentedActionContext): Promise&lt;void&gt;;
  }
  
  export const actions: ActionTree&lt;State, RootState&gt; &amp; Actions = {
    [ActionTypes.doSomething]({ commit, rootGetters, dispatch }) {
        // You can now use getters From other stores, and also the mutation and action useing All(name)Types and having them typed
    },</code></pre>
  </div>
  </div>
  </p>