Multiple new Vuex() in various components

[Squrl_G]

I have an app that is built in Ampersand, but is pulling in a few Vue components into discreet areas of the UI. One of those components is accessing our Vuex store, and I tried to wire up the other component to also be able to communicate with it, but could not get it working.

My best guess is that the new one is being instantiated first, then when the existing one is being instantiated, it is overwriting it.

Searches on the topic only yielded info about modules, so I wanted to ask if anyone could confirm if this is indeed not possible to have multiple calls to new Vuex() in various components in the browser at once?

[JamesThomson]

Please provide code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

Asking for Help: A few guidelines

In order to receive the best answers to your questions please follow these simple guidelines. Be descriptive about your question or problem and be sure to include any errors. Single line topics will rarely receive answers and do not just post a screenshot. Provide examples of the code in question and use syntax highlighting. Breakdown the issue in your code and provide a link to an example that replicates it. Use JSFiddle, CodePen, JSBin, or CodeSandbox. Following these few steps wil…

[Squrl_G]

The Ampersand app utilizes these two components in different locations on the page. TranscriptAnnotations currently access the Vuex store.

export { default as TranscriptAnnotations } from './components/transcript_annotations'
export { default as TranscriptViewer } from './components/transcript_viewer'

TranscriptAnnotations is pulled in via ‘portal-vue’

this._portalTarget = new Vue(TranscriptAnnotations).$mount(mountPoint)

TranscriptViewer has no Vuex access yet, and is pulled in via a different custom helper method, at the heart of which is

const vueInstance = new Vue({
    render: function(createElement) {
      return createElement(component, { props: this.instanceProps, on: listeners, ref: 'componentInstance' })},

The Vuex instances within each are created in the same way, but when i view the Vue dev tools Vuex portion when run, only one of these Vuex states is visible (they don’t access all of the same modules which is how I can tell which is accessible.)

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    annotations   : Annotations,
    notifications : Notifications
  }
})

export default {
  store,
  components {}
}

When executed, the TranscriptViewer code does not throw any errors when attempting to commit or dispatch, but it does nothing, fails silently.

So, the main question I have is to confirm if this should be possible, or if it is known that the browser can only ever have one new Vuex() instantiated witihin it on a page at any given time.