Unable to use actions in dynamically registered module

I am trying to put a vuex module into a reusable npm package.

I want the store to exist on it’s own so I can reuse it across multiple packages and in the primary app.

I am using the idea that I found here from @LinusBorg that leverages registerModule.

I can get the state from the module to display, but I am unable to dispatch an action on the module.

I keep getting the errors

[vuex] unknown action type: baseModule/adjustments/setBrightness

[vuex] unknown action type: baseModule/adjustments/setContrast

Directory structure

-+ base
 +- index.js
 ++ baseModule
  +- index.js
  +- adjustments/
  +- other-stuff/
  
-+ prototype
 +- App.vue
 +- main.js
 ++ vuex/
  +- index.js

files

// base/index.js
import baseModule from './baseModule'

function install (Vue, options = {}) {
  if (!options.store) console.log('Please provide a store!!')
  options.store.registerModule('baseModule', baseModule)
}

export default {
  install
}
// base/baseModule/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import adjustments from './adjustments'
import otherStuff from './other-stuff'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    adjustments,
    otherStuff
  },
  actions: {},
  strict: true
})
// prototype/vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {},
  actions: {},
  strict: true
})
// base/badeModule/adjustments/index.js
import state from './state'
import * as getters from './getters'
import * as actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  actions
}

// base/badeModule/adjustments/actions.js
export const setContrast = (context, { contrast }) => {
  context.commit('setContrast', contrast)
}
export const setBrightness = (context, { brightness }) => {
  context.commit('setBrightness', brightness)
}

// base/badeModule/adjustments/mutations.js
export function setContrast (state, contrast) {
  state.contrast = contrast
}
export function setBrightness (state, brightness) {
  state.brightness = brightness
}

// base/badeModule/adjustments/state.js
export default () => ({
  brightness: 3,
  contrast: 0,
  exposure: 0
})

// prototype/main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import store from './vuex'
import BaseModule from '../../store'

Vue.config.productionTip = false
Vue.use(Vuex)
Vue.use(BaseModule, { store })
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// prototype/App.vue
<template>
  <div id="app">
    brightness: {{ brightness }}<br/>
    contrast: {{ contrast }}<br/>
    <button @click="addBrightness">brightness</button>
    <button @click="addContrast">contrast</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed: {
    brightness () {
      if (this.$store.state.baseModule.adjustments) {
        return this.$store.state.baseModule.adjustments.brightness
      }
      return -1
    },
    contrast () {
      if (this.$store.state.baseModule.adjustments) {
        return this.$store.state.baseModule.adjustments.contrast
      }
      return -1
    }
  },
  methods: {
    addBrightness () {
      this.$store.dispatch('baseModule/adjustments/setBrightness', this.brightness + 1)
    },
    addContrast () {
      this.$store.dispatch('baseModule/adjustments/setContrast', this.contrast + 1)
    }
  }
}
</script>

I figured this out and wanted to post what I found in case anyone else ever needs it.

The main issue I was having was with the module index.

// base/baseModule/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import adjustments from './adjustments'
import otherStuff from './other-stuff'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    adjustments,
    otherStuff
  },
  actions: {},
  strict: true
})

I was mistaken in instantiating a store and it should be a regular object

// base/baseModule/index.js
import adjustments from './adjustments'
import otherStuff from './other-stuff'

export default {
  namespaced: true,
  modules: {
    adjustments,
    otherStuff
  },
  strict: true
}