-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
Closed
Description
What problem does this feature solve?
I have several modules defined on my store, with its own store on each module:
export default new Vuex.Store({
modules: {
user,
items,
invoices,
... // A bunch of other modules
}
})
The issue is that when the user logs out the app, all the information in the store remains since no mutation is being called to effect them or the set them to its initial state, therefore when another user logs in he can see information of the previous user, I know that I can just create a new mutation to set the store to its initial state, but that means that I'd need to call this mutation for each module that I have.
Is there a way to clear them all?
What does the proposed API look like?
It would be great to have a reserved mutation named 'clearAll' or alike, that resets all the module stores to its initial state as they were defined
...mapMutations([
'clearAll'
])
Then on the logout method
logout: function () {
this.$store.dispatch('logout').then(
() => {
this.$router.push('/login')
this.clearAll()
}
)
},
agcty, brianjmiller, spmsupun, morganmccol, nelsonlarocca and 25 morealigoren and gadelkareem
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
robokozo commentedon Jan 8, 2018
You can easily implement something like this on your own.
On your 'root' Vuex store you can implement an action that calls each individual modules 'reset' mutation.
This gives you greater control over a generic solution because you might have modules that you wouldn't want to clear under some circumstances.
ktsn commentedon Jan 9, 2018
As @robodude described.
FYI, you can declare a function returning an initial state to reset a state.
DarynHolmes commentedon Mar 28, 2018
Thanks for this. I was wondering why does
reset
loop over all the keys? Why can't is just setstate
toinitialState()
?kiaking commentedon Mar 28, 2018
Because if you do that (
state = initialState
) then the state object will loose it's observer and it won't be reactive anymore. Same as plain object behavior in JavaScript.DarynHolmes commentedon Mar 28, 2018
Thanks @kiaking for the fast and helpful response.
peacefulseeker commentedon May 24, 2018
Not sure why, but even after creating initialState function, which returns clean object, vue observer was assigned to it after. Probably did something wrong.
But than came across kind of Object.freeze() decision:
And it worked liek a charm. May be the problem was also in deeply nested Objects.
JFGHT commentedon Jun 1, 2018
Why Vuex doesn't have something like this?
@ktsn
https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store
torbentschechne commentedon Jun 12, 2018
@ktsn Thanks for your proposal, but this does not work nested object states. Do you have a solution as well?
maksnester commentedon Jun 27, 2018
In case if there is no additional keys added in state, would
Object.assign(state, initialState())
bring the same result? In terms of handling getters correctly and so on.NJM8 commentedon Aug 9, 2018
I wanted to chime in with my variation on the great solution provided by @ktsn. I have 10ish vuex modules and like to keep things super DRY. So I defined the same initialState function, but the only other thing I do in the module is put this on the modules state.
In user.js module
Then define a global action that will check the presence of initialState on each modules state, and if it has it, loop over the keys and commit the mutation to reset it. I used snake case for all my initial state props and mutations to keep it simple.
In global actions
Any feedback or improvements appreciated!
starfruitsolutions commentedon Sep 3, 2018
When you do this:
You're using the initial state object for the state, so next time you need to clear it, it won't be in the "initial state". That's why the solution provided by @ktsn requires a function to return a new initial state. You don't need to do this if you:
Object.assign
when you actually reset the state.Here's an example that will clear the entire state including modules:
sjmcdowall commentedon Sep 24, 2018
@NJM8 -- Love the way you are doing this, although in Typescript I am having some headaches ..LOL
However, one quick question .. Why are your resetXXXX actions and not pure mutations? Well maybe the overall resetAllState should be (although not sure about that) ?? They aren't doing anything really than doing mutations .. no sides effects that I can see..
NJM8 commentedon Sep 25, 2018
@sjmcdowall Thanks, glad you like it, good luck with the typescript, I have no experience with that.
My resetXXXX are all actions purely out of preference. I try to use actions for everything to have a single pipeline for how data is affected. Some of my early VueJs apps turned out to be a mess because I wasn't strict with that and they were very hard to debug. Now getters get, mutations set, and actions do all the work. Helps me keep things clean and organized. Although yes it can be more code sometimes.
sjmcdowall commentedon Sep 25, 2018
@NJM8 -- The only thing I don't like about actions -- unless you need them -- is that store.dispatch() always returns a Promise .. which then you have to handle .. (or should.. Typescript sort of forces you to do it) .. whereas pure mutations cannot be Async .. so no async stuff when using them .. but I do make sure a mutation truly only mutates the state .. no other side effects !
31 remaining items
ikramkhizar commentedon Sep 19, 2020
Try that.
setTimeout(()=>
{
window.location.href = "/";
},3000);
RonaldCast commentedon Oct 8, 2020
The method that worked for me was this:
jvhellemondt commentedon Dec 18, 2020
It feels kinda hacky to do it as follows. But it works..
Any objections I'm missing? I believe reactivity is still in order. But again, it feels hacky..
evgencode commentedon Feb 4, 2021
If the state for this key has already been changed, the changed state will be here. As a result, we will receive the same state as before reset. There will be a reference to the changed object
therealcoder1337 commentedon Feb 23, 2021
would be nice to have a reset feature directly integrated to vuex, especially since you can already define module state as a function to improve reusability: https://vuex.vuejs.org/guide/modules.html#module-reuse
jskitz commentedon Jul 6, 2021
Instead of walking the state and setting each back to it's initial state, why not just reload the app if you want all state moved back to its initial state? On logout in my app, I do the following things:
There is a small little flash that I'm assuming the user is really not going to notice because after all, they are logging out of the app. But this has the intended behavior of just resetting all vuex storage back to its initial state. It's less control based on the other solutions here, but on logout, I don't see any reason why we would need to retain any state. Is there something I am missing with this solution?
NJM8 commentedon Jul 6, 2021
@jskitz I think that is a great simple solution for an app that loads quickly with a boss that doesn't mind the small little flash 😉 . One utility for this functionality was having large amounts of data loaded related to an entity, then you want to unload and view a different entity. Of course you should be saving both but sometimes it doesn't make sense or makes the app too complex. Also playing with VuexPersist can make a state reset function very helpful.
jskitz commentedon Jul 6, 2021
@NJM8 that makes a lot of sense. Thanks for elaborating on cases where this would not be a great solution. Much appreciated!
metalsadman commentedon Sep 29, 2021
which is very slow walking trough many modules and when data is already populated in Vue3+Vuex4. I've resorted back to reloading in the end since i have functionality like you've described :(.
huybuidac commentedon Oct 4, 2021
@metalsadman Did you try vuex-extensions?
Just call
store.reset
to reset all stores.BonBonSlick commentedon Oct 21, 2021
Same questions as @huybuidac asked, anyone tried https://github.com/huybuidac/vuex-extensions ? Any edge cases and side effects? Difficulties? Performance? Issues?
Same to https://github.com/ianwalter/vuex-reset
BonBonSlick commentedon Oct 21, 2021
@j623415 its impossible to call router.go() without params in TS. You have to pass number.
@huybuidac In vue 2 + TS above packages vuex-reset and vuex-extensions do not work
jatin-maropost commentedon Dec 7, 2022
Thanks for sharing