Discovering type safe usage of Vuex

typed-vuex.ts

import { Store, ActionContext } from 'vuex'

type Actions<S, P> = {
  [K in keyof P]: (ctx: ActionContext<S, any>, payload: P[K]) => void | Promise<any>
}

type Mutations<S, P> = {
  [K in keyof P]: (state: S, payload: P[K]) => void
}

type Mapper<P> = {
  [K in keyof P]: { type: K } & P[K]
}

type Dispatch<P, M extends Mapper<P> = Mapper<P>, K extends keyof M = keyof M> = M[K]

interface MutationPayloads {
  foo: {
    value: number
  }
  bar: {
    value: string
  }
}

const state = {
  count: 0
}

const mutations: Mutations<typeof state, MutationPayloads> = {
  foo(state, payload) {
    const n: number = payload.value
  },
  bar(state, payload) {
    const s: string = payload.value
  }
}

const example = { state, mutations }

const store = new Store({
  modules: {
    example
  }
})

store.commit<Dispatch<MutationPayloads>>({
  type: 'bar',
  value: 'hello'
})