New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reactivity removed on refresh #34
Comments
For anybody that is struggling with this same issue, I just implemented a quick recursive function that solves this solution for now. This is basically a hack so I am hoping that there is a better way to overcome this. function makeReactive(state) {
if (typeof state !== 'object') return;
Object.keys(state).forEach(function (key) {
if (state[key] !== null && state[key] !== undefined) {
Vue.set(state, key, state[key]);
makeReactive(state[key]);
}
});
}
export const actions = {
initial({rootState}) {
makeReactive(rootState);
},
}; Just call the action as the first thing on the load of the page. |
Try using with the strict mode mutation (as mentioned on the README) |
@championswimmer But the documentation says not to use strict mode in production. So what would be the solution for getting it to work in production? |
I think we have the same problem. I have tried playing around with it for the last half hour but I just cannot figure out what causes it to happen. ReproductionThe code I've used to test this is published as a reproduction repo.
RemarksNotice that the items from the default state always appear, but the ones only stored in the local storage go sometimes missing. As I've indicated in the code, the only thing that was always true was that it would not display the state when the state was restored after Vue had loaded. I also noticed that time travel using the devtools is broken for me on this repo, which is not the case for my production code. In the production code, I can fix the state by commiting the My hunch is that some work is still being done in constructing the |
Do not use strict mode in production, just use the mutation. Basically -
Hope you get it ? |
@championswimmer I am seeing this behaviour even with the strict mode mutation in use. It looks like @y0hy0h 's example repo uses the strict mode mutation too: https://github.com/Y0hy0h/vuex-persist-premature-load/blob/master/src/main.js |
I think I see what the bug is, but I'm not yet sure about the best solution, so maybe we can discuss this. The first step to the solution may be to add a first argument to merge: |
…d-on-refresh-#34 Mutate the state's root properties one by one using Vue.$set
We just installed the latest version, and we still have this bug. Is there anything else we should do to fix it? |
I had the same issue but I wasn't able to find a working solution so I decided to switch to Vuex-persistedstate which does not have this issue and provides almost the same functionalities as this package. |
I am having trouble with my store elements not continuing to be reactive after refreshing the page. My state to start is empty such that:
I then am using axios to get information from an API and then pushing objects into this array. Below is my mutation:
When I inspect this property in the console, I can see that the reactive getters and setters are added onto these objects within the array. However, when I refresh the page and inspect these objects, the array is reactive but the actual objects are not.
How can I fix this without having to manually go through and fix this on every single module? (I tried to do a global Vue.set() on the state, but that didn't fix it either.)
The text was updated successfully, but these errors were encountered: