Correct placement of registerModule

I am attempting to register a module and tried both in mounted and created hooks with limited success. Sometimes it works when I navigate to the page, next time I get unknown action type: GET_RECORDS (action method in the new registered module)

So sometimes its there and available, sometimes its not.
Clear local storage / cookies / start fresh and navigate to the page and 50/50 chance of working or failure.

So I define a name for the store

const storeName = 'clientStore'

created / or mounted tried both:

created() {
    const store = this.$store
    if (!(store && store.state && store.state[storeName])) {
      store.registerModule(storeName, selectStore)
      console.log(`register Module: ${storeName}`)
    } else {
      // re-use the already existing module
      console.log(`reusing existing module: ${storeName}`)
    }
  },

Inspect network activity and when it works (module registered) it makes the API call from the action and everthing goes smooth. Navigate away and back back to 50/50 success and failure. No changes to code / params or anything like that.

Any suggestions? Ideas? Spot any errors?

Thanks,

Dave

Ok moved the registration to the beforeMount() lifecycle hook. Not sure if that makes a huge difference.

I see the problem now is on page refresh / F5 I have computed properties / …mapState errrors

computed: {
    ...mapState({
      /* this does not exist since clientStore is not loaded or in the process of being registered */
      loading: state => state.clientStore.loading 
    }),
}

On refresh / F5 I get the error " Cannot read property ‘loading’ of undefined"

The code that you shared so far looks fine.

This probably requires a lot more context.

  • Is this store module lazy-loaded? when and where?
  • Where is is mapState helper used? in the same component that registers the store or somewhere else?

As it is I can’t really tell the flow of things so I can only guess that you register the store in some lazy-loaded component’s beforeCreate (previously: created) hook and that (lozy loading) happens asynchronously, so some other component trying to refernce this module synchronously fails as the module hasn’t loaded.

Without proper context though, this is all I can say.

The module is imported static:

import selectStore from '@/modules/selectStore.js'
const storeName = 'clientStore'

And this is computed references:

  computed: {
    ...mapState({
      loading: state => state.clientStore.loading,
      clients: state => state.clientStore.selectables
    }),
    records: {
      get() {
        return this.$store.getters['clientStore/getRecords']
      },
      set(value) {
        this.$store.commit('clientStore/setRecords', value)
      }
    }
  },

Everything right now is all in the same component. And only referenced here. No other modules are attempting to access “clientStore” from other components / Vuex.

But still F5 / Refresh gets the error " Cannot read property ‘loading’ of undefined"