Vuex + TypeScript - Store Structure Strongly Typed

index.ts

import { createStore } from 'vuex';

// My custom modules
import exampleModule from './module-template';
import { ExampleStateInterface } from './module-template/state';


export interface StateInterface {
  // Define your own store structure, using submodules if needed
  // example: ExampleStateInterface;
  // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
  example: ExampleStateInterface
}

export default createStore<StateInterface>({
  modules: {
    example: exampleModule
  }
})

module-template-actions.ts

import { ActionTree } from 'vuex';
import { ExampleStateInterface } from './state';
import { StateInterface } from '../index';


const actions: ActionTree<ExampleStateInterface, StateInterface> = {
    someAction( /*{ commit }, payload  */ ) {
        // a line to prevent linter errors
    }
}



export default actions;

module-template-getters.ts

import { GetterTree } from 'vuex';
import { ExampleStateInterface } from './state';
import { StateInterface } from '../index';


const getters: GetterTree<ExampleStateInterface, StateInterface> = {
    someGetter( /* state */ ) {
        // return true;
    }
}



export default getters;

module-template-index.ts

import { Module } from 'vuex';
import { StateInterface } from '../index';

import state, { ExampleStateInterface } from './state';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';


const exampleModule: Module<ExampleStateInterface, StateInterface> = {
    namespaced: true,
    actions,
    getters,
    mutations,
    state
}


export default exampleModule;

module-template-mutations.ts

import { MutationTree } from 'vuex';
import { ExampleStateInterface } from './state';


const mutation: MutationTree<ExampleStateInterface> = {
    someMutation( /* state: ExampleStateInterface */) {
        // a line to prevent linter errors
    }
}


export default mutation;

module-template-state.ts

export interface ExampleStateInterface {
    prop: boolean;
}

function state(): ExampleStateInterface {
    return {
        prop: true,
    }
}

export default state;