Discussion on: 🚩 Vuex Pattern: Smart Module Registration

[Mikhail Panichev]

Hi!
I've also watched this video and inspired by the parts about auto registration for vuex modules and components. I've tried these techniques in my workflow, but I've found that they are less flexible than manual imports.

For example: I want to add axios hook for 401 response code and unauthorize the user in this case. If I have auto-module-registration, I have to define this hook somewhere outside the store. I think it's better to define this hook in the module definition, by exporting vuex plugin function from module and then register this plugin in store index file. Something like this:

// auth module
export const init = store => {
  store.dispatch('checkAuth');

  axios.interceptors.response.use(null, error => {
    if (error.response && error.response.status === 401 && store.getters.isUserAuthorized) {
      store.commit(types.USER_LOGOUT);
    }

    throw error;
  });
};

// store index
const store = new Vuex.Store({
  modules { ... },
  plugins: [
    loginModule.init,
  ],
});

in conclusion I think that you described a good technique and it's great for boilerplates and fast prototyping, but it's not a very flexible

[Nikos Koikas]

I agree with you.
Of course, you need a good experience with Vuex. In your example, auth.js module file has different workflow from standard modules.
Every project is different. As you said above, this technique make your development faster and (cleaner), but loses a little bit from flexibility. Before designing the architecture of a project's store, you have to consider the pros and cons of this auto-registration pattern and if it suits to your project.