Clear all stores or set them all to its initial state

[JonaMX]

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()
    }
  )
},

[robokozo]

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.

    actions: {
        clearAll({ commit }){
            commit("moduleA/reset")
            commit("moduleC/reset")
        }
    }

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]

As @robodude described.

FYI, you can declare a function returning an initial state to reset a state.

function initialState () {
  return { /* .. initial state ... */ }
}

export default {
  state: initialState,

  mutations: {
    reset (state) {
      // acquire initial state
      const s = initialState()
      Object.keys(s).forEach(key => {
        state[key] = s[key]
      })
    }
  }
}

[DarynHolmes]

Thanks for this. I was wondering why does reset loop over all the keys? Why can't is just set state to initialState() ?

[kiaking]

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.

const object = { key: 'value' }

function one (o) {
  o.key = 'one'
}

one(object)

console.log(object) // <- { key: 'value' }

function two (o) {
  o = { key: 'two' }
}

two(object)

console.log(object) // <- { key: 'value' } Not modified!

[DarynHolmes]

Thanks @kiaking for the fast and helpful response.

[peacefulseeker]

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:

// state.js

const initialState = {
  pflegegrad: 0,
  progress: 0,
  result: {
    initial: 0,
    final: 0,
  },
  completedModule: 0,
  currentModule: 1,
  modules: ...nestedObj,
}

export default () => ({
  ...JSON.parse(JSON.stringify(initialState)),
})

And it worked liek a charm. May be the problem was also in deeply nested Objects.

[JFGHT]

Why Vuex doesn't have something like this?

@ktsn

https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store

[torbentschechne]

@ktsn Thanks for your proposal, but this does not work nested object states. Do you have a solution as well?

[maksnester]

Object.keys(s).forEach(key => {
        state[key] = s[key]
      })

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]

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

function initialState() {
  return {
    status: "",
    profile: {}
  };
}

export const state = {
  initialState: initialState,
  status: initialState().status,
  profile: initialState().profile
};

export const mutations = {
  SET_STATUS: (state, payload) => {
    state.status = payload;
  },
  SET_PROFILE: (state, payload) => {
    state.profile = payload;
  }
};

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

actions: {
    resetAllState({ dispatch }) {
      for (const currentModule in modules) {
        if (modules[currentModule].state.hasOwnProperty("initialState")) {
          dispatch("resetModuleState", currentModule);
        }
      }
    },
    resetModuleState: ({ commit }, currentModule) => {
      const initialState = modules[currentModule].state.initialState;
      Object.keys(initialState).forEach(key => {
        commit(`${currentModule}/SET_${key.toUpperCase()}`, initialState[key]);
      });
    }
  },

Any feedback or improvements appreciated!

[starfruitsolutions]

When you do this:

 Object.keys(s).forEach(key => {
        state[key] = initialState[key]
      })

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:

1. import the initial state(or clone it) before use
2. use Object.assign when you actually reset the state.

Here's an example that will clear the entire state including modules:

// import modules
import cart from './modules/cart'
import invoices from './modules/invoices'
import person from './modules/person'

// initial state
let initialState = {
  cart: cart.state,
  invoices: invoices.state,
  person: person.state
}

export default new Vuex.Store({
  modules: {
    cart,
    invoices,
    person
  },
  mutations: {
    reset (state) {
      Object.keys(state).forEach(key => {
        Object.assign(state[key], initialState[key])
      })
    }
  }
})

[sjmcdowall]

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

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

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