title: Vuex: shared nested module in different modules without duplication
body: <p>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.</p>
  
  <p>For example let's stay that I need the <code>fileId</code> in two different other modules, my approach is the following:</p>
  
  <pre><code>// common file id store:
  export default {
    state: {
      fileId: '',
    },
    actions: {
      setFileId({commit}, id) {
        commit('mutateFileId', id);
      },
    },
    mutations: {
      mutateId(state, id) {
        state.fileId = id;
      },
    },
  };
  </code></pre>
  
  <p>and then I import that module into others module for example:</p>
  
  <pre><code>// 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);
      },
    },
  };
  </code></pre>
  
  <p>And in another store where I still need that fileId:</p>
  
  <pre><code>// 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);
      },
    },
  };
  </code></pre>
  
  <p>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...</p>
  
  <p>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 <code>console.log</code> in the body of the action:</p>
  
  <pre><code>  actions: {
      setFileId({commit}, id) {
        console.log('mutating file id');
        commit('mutateFileId', id);
      },
    },
  </code></pre>
  
  <p>even if I trigger that action from just one other single module that <code>console.log</code> is gonna be printed twice.</p>
  
  <p>There's a way to have shared nested modules without duplicating them?</p>