Discussion on: How To Structure a Massive Vuex Store for a Production App

Awesome - I use createNamespacedHelpers but I guess I never realized that worked the same way as using mapActions directly with a namespace as the first parameter!

I like having strong types for my actions/mutations without having to import something, so I create an action function that uses JS Doc type unions

export const actionTypes = {
  UPDATE_DATA: 'UPDATE_DATA',
  LOAD_DATA: 'LOAD_DATA'
};

/**
 * @param {keyof actionTypes} actionType
 */
export function action(actionType) {
  return `dataModule/${actionType}`;
}

In my SFCs I can use it like this:

import { action as dataAction } from './store'

export default {
  methods: {
    onSubmit() {
      this.$store.dispatch(dataAction('UPDATE_DATA'), { someData: [ ... ] });
    }   
  }
}

The value I can pass to dataAction is strongly typed to be only one of the keys of actionTypes.