If a new version of the application is deployed , the VueX is not reactive until user does a hard refresh

[Alexlaw6988]

Version

3.1.2

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Hi Team,

I am using the Vue 2 and the following VueX libraries, "vuex": "^3.1.2", "vuex-oidc": "^3.5.1", "vuex-persistedstate": "^2.7.1"

My Issue:

this cannot be reproduced by code pen or sand box .

I am using a microfront-end, some of the modules developed by angular js and some of the modules are developed by vue js user is working on application version-1, meanwhile the version-2 is deployed. if user navigates to a page which is developed by Angular and if he comes back to the pages which is using vue js, I can see all the new changes but when I change the values in vuex. The setter is working (vueX persisted store updating the localstorage) but getter is not (reactive) returning the new value.

What is expected?

the state should be reactive

What is actually happening?

The setter is working (vueX persisted store updating the localstorage) but getter is not (reactive) returning the new value.

---

if I do a refresh, it is working fine. but I wants to solve without a refresh.

is there anyway to solve the reactive issue of the VueX in this scenario?

[HamadaFMahdi]

Hey! Last time I worked with vue & localstorage together, vue was unable to keep track of changes to localstorage (e.g. the computed property was not updating and showing the latest data in localstorage ). Is this the kind of issue you are facing?

If so, I don’t think it’s a vuex issue but more of a reactivity+localstorage issue. Let me know and I’ll try and give you some suggestions.

[Alexlaw6988]

Hi @HamadaFMahdi ,

Thanks for your reply,

My issue is only when a new version is installed, if I refresh the browser the problem is resolved.

reproducing steps:

1. user uses the application(version 1).
2. logged out.
3. A new version of the application (version 2) is deployed.( some of the Stores has been changed in the new version).
4. User logged in.
5. trying to use the page using VueX store the issue arise.(I am able to set the value but , it is not reflecting in computed property)
6. refresh the Browser issue sorted out.(it is reflecting in computed property)

It is happening only when a new release is deployed in server, can we make it reactive in this situation ? with out refreshing the app ?

[cuebit]

@Alexlaw6988 why can't this illustrated by way of a reproduction? Until then, there will be very little for the community to offer in terms of help.

That said, generally speaking, when dependencies change they should really promote a refresh. This is beneficial for many reasons I won't go into here. Suffice to say, if your store expects changes beyond the realm of the users current session, I would highly recommend you reload the page.

[well-prado]

Hey! Last time I worked with vue & localstorage together, vue was unable to keep track of changes to localstorage (e.g. the computed property was not updating and showing the latest data in localstorage ). Is this the kind of issue you are facing?

If so, I don’t think it’s a vuex issue but more of a reactivity+localstorage issue. Let me know and I’ll try and give you some suggestions.

Hey @HamadaFMahdi, I'm facing this exacly issue. My VUEX state is being updated normally with my local storage. But my Getters do not update and my computed property always get the project info from there. And this causes my app to render the info from one project inside another one.

Do you have any suggestion?