CODEWITHSUNDEEP
vue.jsvuejs2
Dave
Dave

Reputation: 2018

How to reset state after user leaves component

Can I reset state, when person leaves a component? I have an error pop up state. Now it's still visible after clicking on a different item in the menu and going back to the page. The user needs to click F5 to make this disappear.

updateAccountData({ commit, state }, { email, password, passwordConfirmation }) {
   return api.profile.updateAccountData({
      email: email,
      password: password,
      password_confirmation: passwordConfirmation,
   }).then(() => {
      commit(SET_SUCCEED, true)
   }).catch((err) => {
      commit(SET_ERROR, err)
   })
},

I think this could be used?

[RESET](state) {
   Object.assign(state, initialState());
},

Upvotes: 1

Views: 178

Answers (1)

maxshuty
maxshuty

Reputation: 10662

Just set a timeout to cancel the error, something like the code below (where commit(SET_ERROR, false) would remove the error state):

updateAccountData({ commit, state }, { email, password, passwordConfirmation }) {
   return api.profile.updateAccountData({
      email: email,
      password: password,
      password_confirmation: passwordConfirmation,
    }).then(() => {
      commit(SET_SUCCEED, true)
    }).catch((err) => {
      commit(SET_ERROR, err)

      // Setting a timeout for 10 seconds then removing the modal
      setTimeout(() => commit(SET_ERROR, false), 10000)
   })
}

Additionally I would consider adding a way for users to close it out manually via an "x" or a close button unless it's just a small toast that won't otherwise affect the rest of the users experience.

Upvotes: 1

Related Questions