Store Disappeared In Latest Update

[yashnerella]

Version

4.0.0

Browser and OS info

Firefox and Chrome on macOS Sierra

Steps to reproduce

Update to the latest version of vue dev tools. Open the Vue extension, click on the VueX icon. Look in the state display.

What is expected?

Prior to the most recent update, I used to see my entire store in the state display of the Vuex tab in the vue dev tool.

What is actually happening?

Now I see a very small part of my store. If I console log my store I see everything as expected in the log.

---

There are multiple people on my team reporting this issue as of this morning. We all reverted back to 3.1.7 and our stores are fully displaying in the vux tab.

[Akryum]

What types of data have you in your Vuex store?

[franzwilhelm]

👍

[yashnerella]

We have all types of data.

Our overall structure uses modules to organize the data as needed. Something like the following...

state
companyName: String,
clientId: Int,

• configuration: {}
• forms: {}

In this example configuration and forms both have their own state with mutations, actions, getters, etc.

As mentioned above, when I reverted back to 3.1.7 we can see our full store with all it's data and dive into each module in the VueX tab of Vue Tools. However, I forgot to turn off auto update and overnight Chrome updated to 4.0.1 and now we see something more like this, which has hardly any of our data. Keep in mind console.logging the store shows everything as expected...

[yashnerella]

Are we the only ones experiencing this? Or did we miss some instructions on how to view the store in VueX tab after 4.0?

[Akryum]

It would be great if you could share a minimal reproduction of the issue. 👍

[MartinBucko]

Same here in version 4.0.1. Only object from root store are listed on state object. Vuex store modules states are missing.

[Akryum]

I can't reproduce this with a fairly large app with vuex modules. We need a minimal reproduction.

[yashnerella]

I'll see what I can do to reproduce is publicly.

[yashnerella]

One thing to note, is the problem doesn't arise if the vuetool is open when the update occurs. However if you close it, or the browser tab that it is connected to, then open vuetools again, the state will be missing most of the data.

Additionally, we have had some inconsistent luck with closing the tool after it's state is wrong, then opening it and it's state will be correct again.

[yashnerella]

We went with the route of blaming ourselves here since there are so few people (mainly us) reporting the issue. We identified a point in our code that causes the vue tool to only display part of the store. We are refactoring and will post the details in case it's a situation that you want to account for.

[yashnerella]

So... we can explain exactly what is happening. We don't know how you expect vue-devtool to handle the situation.

We have an app (let's call it OurApp) with a store that has a fairly complex data structure using modules, actions, mutation, getters and all sorts of datatypes.

OurApp uses a custom plugin that we created for configurations.

In the configuration plugin, we have a store defined as so...

import configuration from '../modules/configuration'
const store = new Vuex.Store({
modules:{configuration}
})

When we use vue-devtools 3.7.1, the VueX tab of vue-devtools displays the state of OurApp.

When we use vue-devtools 4.0.0 or 4.0.1, the VueX tab of vue-devtools displays the state of our configuration plugin.

Keep in mind, that OurApp works exactly the the same and as expected regardless of which version of vue-devtools we use. The difference is simply in the displaying of the state in the VueX tab of vue-devtools.

As far as we understand, our plugin is written as it should be.

Our expectation is that vue-devtools would either display the state of OurApp, or give us a way to toggle between the state of OurApp and our configuration plugin.

Thoughts?

[Akryum]

Let's continue here then: #430