The Vuex State variables doesnt update. It just stays with the initial values.

[zuaaef]

Version

6.0.0-beta.11

Browser and OS info

MacOS catalina 10.15.4 (19E266) with google chrome Version 90.0.4430.212 (Official Build) (x86_64)

Steps to reproduce

I have to use console.log() as a workaround for me to see the values. I just run the app, and update values in the Vuex Store.

What is expected?

values in state should update

What is actually happening?

values stay the same as default -> https://user-images.githubusercontent.com/18083923/119898167-77304980-bf0f-11eb-8d89-f076e2edec97.png

[zuaaef]

i also tried it on Firefox, so i dont think it is browser related.

[Akryum]

Please provide a reproduction of your issue so I can run it and find where the problem is.

[zuaaef]

I have a huge app.. i'll try to create a smaller app which reproduces the bug.
but in the main time not sure if this is the issue?

const getDefaultState = () => ({
  navStackData: {
    indexData: {
      data: []
    },
    trendData: {
      data: []
    },
    feedData:{
      data: []
    },
    meData:{
      data: []
    }
  }
})

export const state = getDefaultState

My state looks like this. I did it this way so that i can reset to default easily whenever i need to.
Also i am using nuxt (but i doubt thats the problem).

If this information doesnt help, then let me know and i'll try to create a sample app some time in future if im free.

[zuaaef]

more info:

You can see that even though the state is still incorrectly on default value,
the getter is correctly on updated values

[Akryum]

What happens if you click on the refresh button on the top right?

[zuaaef]

If i click on the refresh button, the state still shows the original value.
it is not updated. The getters however are always updated correctly even without clicking on the button.

[dflock]

This happens to me too - it makes it really hard to see the "current state" of the store. If I have actions or mutations I can see them in the timeline view, but the inspector always shows me the initial state, not the current state; the refresh button doesn't do anything.

This is using:
Vue Dev Tools 6.0.0 beta 14
Chrome Version 90.0.4430.212 (Official Build) (64-bit)

[m4heshd]

@dflock I'm racking my brain trying to find the "force refresh" button. I thought the beta version doesn't have it. How come everybody else have it and I don't? Is the refresh only available for Vuex now?

[dflock]

Just "refresh" not "force refresh", afaik.

It's the little refresh icon in the top right of the devtools window - you can see it in the screenshot at the top of this thread:

[m4heshd]

Just "refresh" not "force refresh", afaik.

@dflock It's referred to as "force refresh" by the core team pretty much everywhere. So I just assumed it's the correct terminology and I think it is correct since it's literally forcing the refresh even though it's supposed to update automatically.

It's the little refresh icon in the top right of the devtools window - you can see it in the screenshot at the top of this thread:

I do know where it's suppose to be and I've used it a lot before because it doesn't update for events that doesn't trigger a re-render. But it's not there anymore. Since Vue 3 for me. 🤔 I just got used to using less and less of Vue devtools because of this issue but I'm doing a massive refactoring right now and this is bothering me very much.

[Akryum]

@m4heshd I guess you are talking about something different. If you have an issue with component data not updating automatically, please open a new issue. In the meantime, you can "force refresh" a component by clicking on it again in the component tree.

[m4heshd]

you can "force refresh" a component by clicking on it again

@Akryum OMG thank you. I don't know how I didn't notice that because I tried pretty much everything. This makes my life a lot easier. Awesome.

[patchthecode]

Hey guys,
i opened this issue 20 days ago.
I dont know when it started working, but it just started working across all my browsers 🤔.
I dont remember updating the plugin (or does it do that automatically?) but now i have version 6.0.0 beta 14 and it works as expected.

Maybe all you other guys can check to see if it works for you now?

I'll close this issue in a couple days.

[patchthecode]

i see @dflock says he is also using version 6.0.0 beta 14 and it is still happening.
did i close my browsers and restart them? no clue.
but it just suddenly started working.

[patchthecode]

Ok. I know why mine suddenly started working.
Its because I stalled ViteJS. When ViteJS is installed, everything works as expected, but once ViteJS is removed, the problem returns.

[ghost]

I'm seeing this same behavior (or rather, lack of it) with 6.0.0 beta 14 on both Firefox Developer Edition 90.0b12 (64-bit) and Chrome 91.0.4472.114 (Official Build) (32-bit). In the right-hand pane, "state" only ever shows the initial state, never the current state, and clicking the refresh/force-refresh icon has no effect. In the right-hand pane, "getters" does update in real-time. Perhaps this is expected behavior... in which case "state" should really be renamed to "initial state" or something similar.

[MrJmpl3]

I don't want bring bad notices, but in v6.0.0-beta.15, the problem persist.

[Akryum]

And I still don't have a valid reproduction...

[khalo-sa]

For me I can confirm the exact same behavior if I use "vuex-persist". As soon as I deactivate the persistence-plugin, dev tools start working correctly.

[dflock]

Hmmm. I am also using vuex-persist, although unfortunately I don't have time this morning to try without.

[ghost]

I am using vuex-persistedstate (not vuex-persist) when this behavior occurs. I also have not had time try this morning without.

[MrJmpl3]

For me I can confirm the exact same behavior if I use "vuex-persist". As soon as I deactivate the persistence-plugin, dev tools start working correctly.

I don't use vuex-persist and have the bug.

@Akryum Sorry, I don't see if exists a valid reproduction, For me, I use Quasar v2, and I cannot reproduce a SSR project in codesandbox.

[helderhernandez]

I was also having problems with the vue devtools extension, as it did not update the status.

I had to perform the following steps (the last step is very strange):

1. Enable Autoload Vuex State in:
   Vue Dev Tools Setting> Autload Vuex Stat, change from disabled to enabled
   

2. Disable Vuex strict mode in my application en /store/index.ts

// state, mutations, etc ....

// disable strict mode Vuex, Nuxt sets it to true by default
export const strict = false; 

1. Finally, before making any mutation, I position myself on Vue Dev Tools and click on Time Travel to This State (On Base State)
   

After that the state in Vue Dev Tools starts to update

NOTE:
I am using Nuxt JS

[MrJmpl3]

@Akryum I ignore how works the devtools, but I have a curiosity, Import like a Symbol affect the devtools?

quasarframework/quasar#9373

[rowanwins]

Also replicated when using vuex-persist

[khalo-sa]

My short term solution is to create a getter that returns the state.

  getters: {
    state(state) {
      return state;
    },

[jaitaiwan]

@Akryum I'm able to replicate this with a completely new project.

Reproduction Steps

Project Setup

$ yarn global add @vue/cli@next
$ vue create testproject
$ cd testproject
$ yarn add vuex vuex-persistedstate

File Contents

App.vue

<template>
  <input v-model="test" />
  <button @click="runMutation">Mutate</button>
  <button @click="runGlobalMutation">Global Mutate</button>
  <button href="#" @click="runAction">Action</button>
  <button href="#" @click="runGlobalAction">Global Action</button>
  {{test}}
</template>

<script>

export default {
  name: 'App',
  data: () => {
    return {test: ''}
  },
  methods: {
    runMutation: function() {
      this.$store.commit('main/MUTATE_TEST', this.test)
      this.test = "DONE"
    },
    runAction: function() {
      this.$store.dispatch('main/ACTION_TEST', this.test).then(() => {
        this.test = "DONE ACTION"
      })
    },
    runGlobalMutation: function() {
      this.$store.commit('MUTATE_TEST', this.test)
      this.test = "DONE"
    },
    runGlobalAction: function() {
      this.$store.dispatch('ACTION_TEST', this.test).then(() => {
        this.test = "DONE ACTION"
      })
    }
  }
}
</script>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const mutateTest = (state, value) => {
    state.testKey = value
}

const actionTest = ({commit}, value) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            commit('MUTATE_TEST', "ACTION_" + value)
            resolve()
        }, 3)
    })
}

export const store = createStore({
    modules: {
        main: {
            namespaced: true,
            state: {
                testKey: ""
            },
            mutations: {
                'MUTATE_TEST': mutateTest
            },
            actions: {
                'ACTION_TEST': actionTest
            },
            getters: {
                'hasTestKey': (state) => (state.testKey !== "")
            }
        }
    },
    state: {
        globalKey: ""
    },
    mutations: {
        "MUTATE_TEST": mutateTest
    },
    actions: {
        'ACTION_TEST': actionTest
    },
    getters: {
        "hasGlobalKey": (state) => (state.globalKey !== "")
    },
    strict: true,
    plugins: [createPersistedState()]
})

createApp(App)
    .use(store)
    .mount('#app')

Starting the app

$ yarn serve

Test Steps

1. In the browser, type something in the text box and choose a store method to run
2. Note that localStorage will now be updated to reflect the change
3. Note that vuejs devtools does not show the change
4. Click the refresh button when looking at vuex state in devtools
5. Note the vuejs devtools does not show the change
6. Refresh the app
7. Note the vuejs devtools does not show the initial localStorage state
8. Click the refresh button when looking at vuex state in devtools
9. Note the vuejs devtools does not show the current state
10. On the store change strict mode from true to false and repeat 1-9

Dependency Information

VueJS Dev Tools Version: 6.0.0 beta 15
Chrome Browser Version: 91.0.4472.124

Package.json dependencies:

  "dependencies": {
    "core-js": "3.15.2",
    "vue": "3.1.4",
    "vuex": "4.0.2",
    "vuex-persistedstate": "4.0.0-beta.3"
  },

Notes

As you can see I've tested this both with namespaced store modules as well as without. Note that I also peformed the same steps with vuex-persist and had the exact same issues however I don't count vuex-persist as a good candidate because when it's strict-mode is turned on it breaks because it is not actually Vue 3 compatible.

If I had to pinpoint where the problem was coming from, I'd say it's something to do with store.replaceState which both persistedstate and persist use. Perhaps even _withCommit()?

[5z5]

how to push myself's code to the project

[Hendersonpinto]

Is this issue solved? I am using Nuxt and can't seem to get the state to update 😞

[jaitaiwan]

I gave up and switched to Pinia

[RobSpectre]

Also encountering this problem. Using vuex-persist, not vuex-persistedstate.

[michug]

Same problem using using vuex-persist

"vue": "^3.2.27",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"

[torressam333]

Still an issue to this day. The refresh icon in vue dev tools does nothing. If I manually update a Boolean for example from true to false in an attempt to toggle ui functionality, it does nothing. Eeeesh been a problem forever I see.

[patchthecode]

i went to pinia

[Cheglok]

same problem
"vue": "^3.2.26",
"vuex": "^4.0.0-0",
"vuex-persist": "^3.1.3"

[MarcelFinkbeiner]

any updates on this?

[zuaaef]

this has started workinng again for me. Not sure how or when. Was it a restart? donno.

[MarcelFinkbeiner]

Yes for me it is working too, unless I do anything with replaceState

[Ben-Avrahami]

im encountering the same issue using
"vuex": "^4.1.0",
and
"vuex-persistedstate": "^4.1.0"
anyone know how to solve this issue?

[dovepa]

Same bug
"vue": "^3.0.0",
"vuex": "^4.1.0",
"vuex-persist": "^3.1.3",