CODEWITHSUNDEEP
javascriptvue.jsvuex
ste
ste

Reputation: 3259

Vuex: shared nested module in different modules without duplication

I'm building a Vue.js application with Vuex as state manager. For various reasons, I have some states that must be shared across different component so I created a nested state with all the common information in order to import it into two different modules.

For example let's stay that I need the fileId in two different other modules, my approach is the following:

// common file id store:
export default {
  state: {
    fileId: '',
  },
  actions: {
    setFileId({commit}, id) {
      commit('mutateFileId', id);
    },
  },
  mutations: {
    mutateId(state, id) {
      state.fileId = id;
    },
  },
};

and then I import that module into others module for example:

// store 1 where I need the file id:
import fileIdModule from '@/store/modules/fileIdModule';

export default {
  modules: {
    fileIdModule,
  },
  actions: {
    whatEver({commit, dispatch}, param) {
      ...
      dispatch('setFileId', 1);
    },
  },
};

And in another store where I still need that fileId:

// store 2 where I need the file id:
import fileIdModule from '@/store/modules/fileIdModule';

export default {
  modules: {
    fileIdModule,
  },
  actions: {
    whatEver2({commit, dispatch}, param2) {
      ...
      dispatch('setFileId', 2);
    },
  },
};

The reason I'm doing this is mainly that that piece of information is only needed across 2 or 3 stores, and my application has already 8/9 and it's gonna grow even bigger...

The problem with this approach is that since I'm importing the same module in two different places, when I trigger an action from that module that action is gonna be duplicated, if I import the module in three different places the actions is gonna be executed three times and so on...to prove this if I insert a console.log in the body of the action:

  actions: {
    setFileId({commit}, id) {
      console.log('mutating file id');
      commit('mutateFileId', id);
    },
  },

even if I trigger that action from just one other single module that console.log is gonna be printed twice.

There's a way to have shared nested modules without duplicating them?

Upvotes: 2

Views: 2408

Answers (2)

Roman Lopez
Roman Lopez

Reputation: 168

Yes, you can absolutely!

Use namespaces... This will define which version of the module you are running... for instance...

If you have fileIdModule attached to an ImageModule and a DocumentModule...

With namespaces you could define each dispatch('ImageModule/fileIdModule/setId')

etc...

Upvotes: 0

Linus Borg
Linus Borg

Reputation: 23968

shared nested modules are not supported by vuex.

You can still commit and dispatch to them from within other modules without a problem, so I don't think it's even a necessary feature.

Just keep in mind that you need to pass {root: true} as the third argument when commiting/dispatching from within a namespaced: true module:

commit('setFileId', 2, {root: true})

Upvotes: 2

Related Questions