title: How to setup a store module using Vue3 with Vuex4 and TypeScript?
body: <p>I want to get into Vue3 / Vuex4 using TypeScript but unfortunately the docs didn’t help much</p>
  <p><a href="https://next.vuex.vuejs.org/guide/typescript-support.html" rel="nofollow noreferrer">https://next.vuex.vuejs.org/guide/typescript-support.html</a></p>
  <p>As a beginner, I started with a simple issue tracking store module. Inside my issues module I created a index.ts file taking in the “global store instance” and registers itself</p>
  <pre><code>import {
    ActionContext,
    ActionTree,
    GetterTree,
    MutationTree,
    Store,
  } from &quot;vuex&quot;;
  
  export default (store: Store&lt;{}&gt;): void =&gt; {
    store.registerModule(&quot;issues&quot;, {
      namespaced: true,
      state,
      getters,
      actions,
      mutations,
    });
  };
  
  export type Issue = {
    title: string;
    isOpen: boolean;
    createdAt: Date;
  };
  
  export type State = {
    issues: Issue[];
  };
  
  export type Getters = {
    issues(state: State): Issue[];
  };
  
  export type ActionAugments = Omit&lt;ActionContext&lt;State, State&gt;, &quot;commit&quot;&gt; &amp; {
    commit&lt;K extends keyof Mutations&gt;(
      key: K,
      payload: Parameters&lt;Mutations[K]&gt;[1]
    ): ReturnType&lt;Mutations[K]&gt;;
  };
  
  export enum ActionType {
    SubmitIssue = &quot;SubmitIssue&quot;,
  }
  
  export type Actions = {
    [ActionType.SubmitIssue](
      context: ActionAugments,
      submitIssuePayload: SubmitIssuePayload
    ): void;
  };
  
  export type SubmitIssuePayload = {
    issueTitle: string;
  };
  
  export enum MutationType {
    SubmitIssue = &quot;SUBMIT_ISSUE&quot;,
  }
  
  export type Mutations = {
    [MutationType.SubmitIssue](state: State, payload: SubmitIssuePayload): void;
  };
  
  const state: State = {
    issues: [],
  };
  
  const getters: GetterTree&lt;State, State&gt; &amp; Getters = {
    issues: function (state: State): Issue[] {
      return state.issues;
    },
  };
  
  const actions: ActionTree&lt;State, State&gt; &amp; Actions = {
    [ActionType.SubmitIssue]: function (
      { commit }: ActionAugments,
      { issueTitle }: SubmitIssuePayload
    ): void {
      commit(MutationType.SubmitIssue, { issueTitle });
    },
  };
  
  const mutations: MutationTree&lt;State&gt; &amp; Mutations = {
    [MutationType.SubmitIssue]: function (
      state: State,
      { issueTitle }: SubmitIssuePayload
    ): void {
      const issue: Issue = {
        title: issueTitle,
        isOpen: true,
        createdAt: new Date(),
      };
  
      state.issues.push(issue);
    },
  };
  </code></pre>
  <p>Currently I’m stuck with the setup for some reasons:</p>
  <ul>
  <li>I copypasted the <code>ActionAugments</code> from Google. Do I really need to reinvent the ActionContext on my own to get access to the commit function?</li>
  <li>The setup is not correct yet. The function <code>store.registerModule</code> shows this error</li>
  </ul>
  <p>.</p>
  <pre><code>No overload matches this call.
    Overload 1 of 2, '(path: string, module: Module&lt;State, {}&gt;, options?: ModuleOptions | undefined): void', gave the following error.
      Type 'GetterTree&lt;State, State&gt; &amp; Getters' is not assignable to type 'GetterTree&lt;State, {}&gt; | undefined'.
        Type 'GetterTree&lt;State, State&gt; &amp; Getters' is not assignable to type 'GetterTree&lt;State, {}&gt;'.
          'string' index signatures are incompatible.
            Type 'Getter&lt;State, State&gt;' is not assignable to type 'Getter&lt;State, {}&gt;'.
              Property 'issues' is missing in type '{}' but required in type 'State'.
    Overload 2 of 2, '(path: string[], module: Module&lt;State, {}&gt;, options?: ModuleOptions | undefined): void', gave the following error.
      Argument of type 'string' is not assignable to parameter of type 'string[]'.ts(2769)
  store.ts(26, 3): 'issues' is declared here.
  index.d.ts(132, 3): The expected type comes from property 'getters' which is declared here on type 'Module&lt;State, {}&gt;'
  </code></pre>
  <p>which makes sense, because the global store instance is of type <code>Store&lt;{}&gt;</code> and my module seems to expect <code>Store&lt;State&gt;</code></p>
  <p>How would I fix this?</p>
  <p>Thanks for help!</p>