Vue-devtools: Vuex Mutations are not captured at the beginning of the initialization

[mikeyao]

Hi, I'm using Vuex and during the Vue created life cycle, I am calling several actions, in which it calls api and dispatch mutations. I could see that the Vuex state is set properly, but the mutations are not recorded.

Does anyone have the same experience or any reason why it's not recorded in the dev tool? Thanks!

[jsl9208]

Same issue, I found that the tool was loaded after some initial mutations.

[blake-newman]

To solve this please ensure the devtools are open. If the application mutations do not capture you will need to reload the application to ensure that Vue devtools captures the mutations.

[mediafreakch]

I have the same problem. Devtools are open, but the mutations I do in the created() callback inside my app (top-level-component) do not appear.

What do you mean by "reload the application" ? Page refresh? That doesn't work neither...

[gary149]

Same problem here my initial dispatch (even with @blake-newman reco) is not captured by vuex section. Did someone found a solution ?

[maartenvanvliet]

Seeing the same here, devtools open but not showing mutations in the store but they do happen. Also happens on mounted() and beforeMounted() callbacks.

[posva]

Hey @maartenvanvliet , can you boil down the error and provide a repro using this template? You can then open a new issue 🙂
Thanks!

[JakubPetriska]

Seeing the same thing. When I refresh the page with devtools open mutations commited in created method of Vue component are still not recorded.

[alexsasharegan]

My root component dispatches various actions to fetch backend data inside the created hook (trying to start the network req as early as possible), and those mutations are not registered in the extension (with the console open the whole time of course). Throttling my network does not change this behavior.

[dzunik91]

@alexsasharegan I've got the same problem ! But it's worth noticing that sometimes mutations are showing randomly !

[rtfleg]

Good news, everyone!
Looks like I made workaround which might be helpful.
https://gist.github.com/rtfleg/cc159e4f773a8a3d9ec3a0f8ca821464

[alexsasharegan]

This is super interesting! I'm gonna give this a shot and see if I can use it conditionally with some kind of process.env.NODE_ENV !== "production" flag.

[alexsasharegan]

So much data! So much win!

import awaitVueDevTools from "./core/vueDevTools"

async function bootstrap(asyncFn) {
    await asyncFn()

    return new Vue({
        el: "#root",
        store,
        router,
        render: h => h(RootComponent)
    })
}

if (process.env.NODE_ENV !== "production") {
    window.app = bootstrap(awaitVueDevTools)
} else {
    bootstrap(() => Promise.resolve())
}

[rtfleg]

Yep, why not ))
Also I want to mention, that function will work in any case, it is smart enough to determine, that dev-tools is not there. But, of course, you can import it conditionaly in order to avoid it in production build.

[alexsasharegan]

One thing, the components tab shows blank using this patch. I have to use the Refresh button to return the component tree.

Also, and probably unrelated, the Inspect DOM button does not work. Using Chrome v59.0.3071.109

[rtfleg]

Hm, looks like I fight with vuex-related problem, but miss more important things.
Not sure that I can deal with it fast (or even can deal with it at all), but I have another solution for that problems...
You can bootstarp app in the regular way and use awaitDevtools function inside created() hook.

Hmm, or maybe I can deal with it after all, I have an idea...

[alexsasharegan]

No worries! This is more helpful than anything else!

[rtfleg]

Already solved that problem, you can find updates and new example in the same gist.

[aldencolerain]

We were having the same issue. To me it seems pretty obvious the app is loading before dev tools. If we throttle the internet connection using chrome dev tools will catch our initial state changes. @posva I think you should consider re-opening the issue. If so many people are running into this we should probably document the limitation, its not immediately obvious why some events and mutations go missing. @blake-newman What do you mean by "reload the application"?

[MikeLP]

Any updates?

[posva]

Sorry for the delay, there's already #408
It's always the same story, we need a reproduction...

[MikeLP]

@posva Let me guess how to reproduce. Here my steps when I found this issue. U need to split your app on 2 chunks - vendor and app by webpack. Then use vuex and vue-router.
Vue.use(Vuex) Vue.use(VueRouter)

Install vue-devtool (chrome or firefox - no matter) and make some "api" calls to server like commit some mutations before and after call.
And then make many page reloads with opened vue-devtool (vuex tab) and you should see that sometimes randomly actions missed in vuex history

[posva]

by reproduction, we mean an actual boiled down HTML file or (boiled down repro in a github repo) to test it plus the steps to showcase the bug. If you manage to showcase it, please, attach it to the other issue #408 . Locking this as to prevent further spamming to a bunch of people