Dynamic Module Doesn't Work

[kosratdev]

Dynamic module doesn't work for me this is my configurations store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({})

store/modules/locale.ts

import store from '@/store'
import { Module, VuexModule } from 'vuex-module-decorators'
import { Locale } from '@/types/types'

/**
 * Locale vuex class.
 */
@Module({ dynamic: true, store, namespaced: true, name: 'locale' })
export default class LocaleStore extends VuexModule {
  localeList: Array<Locale> = [
    { text: 'English', value: 'en', dir: 'ltr' },
    { text: 'Arabic', value: 'ar', dir: 'rtl' },
    { text: 'Kurdish', value: 'ckb', dir: 'rtl' },
  ]

  /**
   * Get locale list from vuex store.
   */
  get getLocaleList() {
    return this.localeList
  }
}

src/App.vue

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import { Locale } from '@/types/types'

const localeStore = namespace('locale')

@Component({
  name: 'App',
})
export default class App extends Vue {
  // Vuex Getters
  @localeStore.Getter('getLocaleList')
  locales!: Array<Locale>

  created() {
    this.setLocale()
  }

  setLocale() {
    console.log(this.locales)
    let lang = localStorage.getItem('language') || 'en'
    const direction = this.locales.filter(l => l.value === lang)[0]
    ...
  }
}
</script>

The out put will be vuex.esm.js?2f62:1130 [vuex] module namespace not found in mapGetters(): locale/

[Robin-Hoodie]

Do you import LocaleStore anywhere?

Webpack won't include files that are not imported anywhere

You can get strong typing on your module by not using vuex-class and getting a reference to your module with getModule(LocaleStore). This will also include the module in the bundle built by webpack.