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

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

May 27 '21 21:05 zuaaef

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

May 27 '21 21:05 zuaaef

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

May 27 '21 23:05 Akryum

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.

May 29 '21 11:05 zuaaef

more info:

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

May 29 '21 11:05 zuaaef

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

May 30 '21 11:05 Akryum

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.

May 30 '21 18:05 zuaaef

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)

Jun 09 '21 20:06 dflock

@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?

Jun 13 '21 23:06 m4heshd

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:

Jun 14 '21 05:06 dflock

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.

Jun 14 '21 05:06 m4heshd

@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.

Jun 16 '21 15:06 Akryum

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.

Jun 16 '21 20:06 m4heshd

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.

Jun 16 '21 21:06 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.

Jun 16 '21 21:06 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.

Jun 17 '21 22:06 patchthecode

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.

Jun 25 '21 15:06 ghost

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

Jun 29 '21 20:06 MrJmpl3

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

Jun 29 '21 22:06 Akryum

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.

Jun 30 '21 13:06 khalo-sa

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

Jun 30 '21 16:06 dflock

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

Jun 30 '21 16:06 ghost

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.

Jun 30 '21 16:06 MrJmpl3

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):

Enable Autoload Vuex State in: Vue Dev Tools Setting> Autload Vuex Stat, change from disabled to enabled
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;

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

Jul 02 '21 23:07 helderhernandez

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

https://github.com/quasarframework/quasar/discussions/9373

Jul 05 '21 17:07 MrJmpl3

Also replicated when using vuex-persist

Jul 09 '21 02:07 rowanwins

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

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

Jul 13 '21 09:07 khalo-sa

@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

In the browser, type something in the text box and choose a store method to run
Note that localStorage will now be updated to reflect the change
Note that vuejs devtools does not show the change
Click the refresh button when looking at vuex state in devtools
Note the vuejs devtools does not show the change
Refresh the app
Note the vuejs devtools does not show the initial localStorage state
Click the refresh button when looking at vuex state in devtools
Note the vuejs devtools does not show the current state
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()?