Vue-devtools: Vuex store not getting updated with Nuxt

[angelocapone]

Version

5.0.3

Browser and OS info

Chrome on Windows 10

Steps to reproduce

After updating to the latest vue devtools version 5.0.3 version, the Vuex store is not getting updated. This was working fine in previous vue devtools version.
Here is the code I’m using in store/index.js

export const state = () => ({
categories: []
})

export const mutations = {
SET_CATEGORIES (state, categories) {
state.categories = categories
}
}

export const actions = {
async nuxtServerInit({ commit }) {
let response = await this.$axios.$get('categories')

    commit('SET_CATEGORIES', response.data)
}

}

What is expected?

I only see an empty 'categories' array when inspecting in the Vuex store. This worked fine in previous devtools version.
I'm expecting the Vuex store array to get updated as seen in previous versions

What is actually happening?

I only see an empty 'categories' array when inspecting in the Vuex store. This worked fine in previous devtools version.
I'm expecting the Vuex store array to get updated as seen in previous versions

[Akryum]

Please provide a runnable reproduction.

[MaxKostenko]

Probably problem only when it used together with Nuxt.

It doesn't display state that was generated on server side. Instead it show initial state.
But it will show relevant state if you come to page from client side (when you change route).
Also if you in Enable dev mode in chrome extension it will cache store state when you open page first times and always display it.

[MaxKostenko]

Basic example of vuex from official Nuxt website displays incorrect info in devtools https://8y075vn9w0.sse.codesandbox.io/

[paxcodes]

I also have this issue and it doesn't use Nuxt. I'll try to provide a runnable reproduction.

[chanmathew]

Also having this issue, using Dev tools 5.0.5 and Nuxt 2.5.1. Chrome on Mac OSX 10.14.2

[vedmant]

I have the same issue, I need to open and close chrome dev tools to make it load vuex state again.

[paxcodes]

I cannot reproduce the problem anymore since #940 was fixed.

[JFGHT]

I'm in 5.0.6 and still having this issue. I'm not using Nuxt.

[joezoller]

Perhaps related, see https://codesandbox.io/s/zrkjk89m3 for a sample. Click New Window in the upper right to open with devtools. If a mutation modifies a referenced object of the state, rather than manipulating the state variable itself, devtools vuex doesn't seem to pick up the change. I'm pretty sure it used to in prior versions.

[chanmathew]

^ that could be why I’m having the same issue, I’m using Object.assign to modify the state object.

[Akryum]

@joezoller It will not work because the mutations payload is cloned so we can replay them.

[joezoller]

@Akryum Hrm, unfortunate in my case (recursive tree traversal) that the sum of the parts doesn't equal the whole, but not the end of the world. Thanks for taking a look.

[mrleblanc101]

Not fixed. I'm using nuxt with vue-dev-tools 5.0.8

[JFGHT]

In my case, it was fixed after 5.0.8.

[karimhossenbux]

In my case, it was fixed after 5.0.8.

But you are not using Nuxt. With Nuxt it's still not fixed.

[mrleblanc101]

Yes, this fixed it for Nuxt ! Thanks

[canhkieu]

It's not work again. :(

[tiagomatosweb]

I'm having the same issue. My vuex devtools suddenly got empty

[Valentin-Seehausen]

Having the same issue with the latest versions and config.vue.devtools = true.

[Valentin-Seehausen]

Erm... ok that sounds very silly:

It works now. I had to turn on recording. The small red button on top of the commit list of devtools.

Don't know why and when I turned it off. Sorry. :-D

[stouch]

Didn't work for me, even with turning on "recording"...

[AdamBD]

I'm having this same issue when using Vue. Components which have deps for data from VueX only have reactivity when the vue-devtools is open. If I have chrome devtools closed reactivity does not work.

[AlexandroWillianHervis]

I'm having the same issue.

[dimoreira]

Same here. I can't even dispatch the load state actions from nuxtServerInit function. The store don't update neither.

[webcoderkz]

any updates? It's one of convenient devtools around, but it's frustrating, that it doesn't work with Nuxt. Rehydrated state just doesn't display correct values.

[TheDeveloperTom]

The problem is actual @yyx990803

[arnauddsj]

I've got the same problem, with nuxt but not sure it comes from nuxt.
I use a custom vuelidate validation on a field that check if a url is unique. if not I commit the error to vuex.
and i show the error in my component.

const isUnique = async function(value) { // check if not already user address if (this.lib.user.url !== value) { try { const urlStatus = await LibService.checkUrl(value) this.$store.commit("stat/RESET_ERROR") return urlStatus } catch (err) { // send error to vuex this.$store.commit("stat/SET_ERROR", { message: "Adresse déjà utilisée", target: "url" }) return false } } else { return true } }

when ever I type an already used url nothing happens until I open vue devtools, and then magically everything is working again... If I uninstall vue devtools the problem is still here and I found no way to make the error appear.

[affinage-digital]

I've got the same problem. Vuex state randomly updated or not from nuxtServerInit