Share state between CERTAIN tabs, but not ALL tabs

[dpeckham]

I have an application which can open several "documents" at a time. For each "document" there can be 1 or 2 tabs/windows. I need to share state between those 2 windows, but not ALL tabs/windows.

Document A - Window/Tab 1 Document B - Window/Tab 2 Document B - Window/Tab 3 Document C - Window/Tab 4 Document D - Window/Tab 5

ALL windows/tabs would share the main "application" state (which is a Vuex "module"). Only tabs with the same document would share "document" state.

What's the best way to do this?

Thanks, Dave

[gabrielmbmb]

Hi @dpeckham, I think there is no easy way to do this right now. The plugin assigns a unique tabId to each window or tab, but it is only used to avoid an infinite loop of synchronization. I could add an option that lets you specify in which tab or windows the state should be synchronized, but this would affect the whole state... It could be a good idea to add specific options for each statePath, including the one I just described.

export default new Vuex.Store({
  state: {
    fruits: {
      oranges: 0,
      apples: 0,
    },
  },
  plugins: [createMultiTabState({
    statesPaths: {
      'fruits.oranges': {
        syncTabs: ['tab1', 'tab2']
      }
    },
  })],
});

This way, you could sync one statePath in just the specified windows or tabs...

Having that said, this functionality will take some time to be implemented, as it requires a few changes in the plugin and I have to figure out some things yet...

What you could do in the meantime is to sync all the documents but implement some kind of logic so only two documents are rendered per window... You could also add a new key to the state that is used by each tab to let know the rest of the tabs which documents is rendering