Support for multiple Vuex stores in the same page

[gjactat]

Hello,

I know that a Vuex store must be unique in a Single Page Application. However, I often develop stand-alone VueJS components that are complex enough to require a Vuex store (because they involve many child components and shared state. E.g : image collection viewer).

These VueJS components are usually instantiated in pages that have no knowledge of VueJS... And it often happens that several independent instances coexist on the same page (each component instance then has its own Vuex store instance).

However, only one Vuex store is visible through development tools. The others are ignored. Even though all components of all instances appear in the tree structure.

Would it be possible to "pick" the store to consider from among those created? Or even better, select the Vuex store attached to the active component in the tree structure (that linked to $vm0)?

Note that I know the concept of module in Vuex stores... But it's not really the need here (we're talking about stand-alone mini applications).

Thank you for your attention

[yashnerella]

Thanks for recognizing that there is an issue. However I am concerned about the location that our reported issue was moved too. While I would agree there may be a tie between our plugin having a store, and our app having a store, and this issue of multiple instances existing on the same page with stores...

Our issue has not existed since October 11th, 2017. It started with the 4.0.0 update. We downloaded the 3.7.1 version of vue-devtools. When we revert to that version, the state in the devetools VueX tab is correct and shows our app state and not our plugin state. As soon as Chrome autoupdates devtools to 4.0.0 or 4.0.1, the state in the VueX tab starts to show our plugin's state.

Maybe the fix is the same, but I believe that we have proved that our issue is a result of a change in devtools 4.0.0.

This should not be a feature request. It should be a bug request.

[yashnerella]

Any chance this will be recognized as a bug in 4.0.0 (per our previous comment) and fixed with more urgency?

We have not realized how important this tool is to us until it stopped displaying the store.

[dabernathy89]

Similar to @yashnerella, we were not having this issue until the most recent major update. [EDIT: Scratch that, this is probably not true]

I'm currently using two different Vuex stores in completely independent Vue instances on different pages in our app. However, on the page where the 2nd one is being used, Vue Devtools tries to load the Vuex store from the 1st instance.

I'm actually not even initializing the Vue instances until I check if i'm on the right page, so i'm not sure how this is happening. Identical (but simplified) code from both of our Vue instances:

import store from './store';
if (document.getElementById('some-element-id')) {
    const app = new Vue({
        el: '#some-element-id',

        data: {},

        store,
    }
}

[hyunoosung]

I tried to rename store to listStore but couldn't achieve because Vue.js doesn't recognize the name other than "store". I guess I will have to put all store logic to one single store.js file.

[Akryum]

@hyounoo You can use store modules.

[dabernathy89]

^ that is the direction I am thinking about taking as well (modules)

[hyunoosung]

oh how do I achieve that? any reference that I can take a look?

[dabernathy89]

@hyounoo it's in the docs: https://vuex.vuejs.org/en/modules.html

[hyunoosung]

@dabernathy89 Thanks!

[hyunoosung]

Just followed the document and implemented a module.
I noticed that I can still call their actions / mutations as I used to call with out modules.
Example:
this.$store
.dispatch("fetchList") <-- resides in moduleA
.then(() => this.$store.dispatch("setLoadingStatus", false)); <-- resides in root state
I think there should be a proper way to distinguish between module methods.
What if I have other modules that has same method names? ex) fetchList in both moduleA and moduleB
I just tested setting fetchList in moduleB and this.$store.dispatch("fetchList") calls both fetchList action in moduleA and moduleB

Edit: nvm found that I had to set namespaced: true in a module.

[bobby-drk]

@yashnerella Did you come up with a solution?

This is really a pain. We used to be able to see the store as a whole, but now all I can see is the plugin store.

Our current work around is every time I open the browser I delete the current extension and reinstalled version 3.7.1.

[ramadimasatria]

Hello,

We have also found similar issue where we need to support multiple stores in one page due to our pretty complex architecture.

We eventually tried to extend the vue-devtools functionality to support multiple stores.
You guys can try our fork here: https://github.com/bukalapak/vue-devtools
and view the code changes here: bukalapak#1

[joemsak]

I have this issue as a vue user of multiple apps in a rails app. I don't need the stores on the same page, but they are loaded up front and the correct vue instance is instantiated if the desired dom element is present in the HTML. Whichever store is imported first is the one that appears in the Vuex tab, even if I am on the page for a different app which has its own store.

FWIW, the components tab is correct, and the list of actions shown in the Vuex tab is correct, but the state, getters, and mutations are wrong.

Thanks!

[yoyoys]

Is this working in progress?

[KarKarbI4]

Hello, everyone. More than one year have passed after PR merge.
Maybe include PR changes in minor update, not 5.x.x version?

[anotheri]

It's really annoying problem, please fix.

[yordivd]

Any idea when this will be fixed?

[ferencbeutel4711]

this would be greatly appreciated for a micro-frontend environment

[bwcgn]

Any update here? Would love to support if this is being picked up

[PVince81]

Regardless of support or not, this mustn't cause side effects or break actual functionality.
I happened to have Vue Devtools enabled with a page where two stores A and B were present.

When pushing a value to a store state value in various places in A with push, it seems the reactivity is lost and the UI doesn't update. (https://github.com/nextcloud/deck/blob/master/src/store/main.js#L196)
If I either disable Vue Devtools or comment out assigning the store B to the window object, A's reactivity is restored.

I checked the contents of the array and the value was added correctly in both cases. So maybe it's whatever is observing the array that is not triggered, so the UI will not refresh.

Ref nextcloud/deck#2721 (comment)

[jaredplowman]

I am in the same state (hahaha no pun intended) as OP. We have several different vue instances that have no knowledge of each other. This is by design as I have intergrated vue into different non-vue areas of our SPA (before the team was using razor and jQuery). At the moment we have a minimum of 3 stores. I wonder if at the very least we could select the store at compile time via webpack.

[Akryum]

With the new devtools architecture and UX, you can now inspect a specific app on the page with the Applications select, which also means different Vuex stores.