Skip to content
This repository has been archived by the owner on Feb 4, 2022. It is now read-only.

Delete persisted state via Nuxt lifecycle hooks #391

Open
Jesus82 opened this issue Jan 26, 2021 · 1 comment
Open

Delete persisted state via Nuxt lifecycle hooks #391

Jesus82 opened this issue Jan 26, 2021 · 1 comment

Comments

@Jesus82
Copy link

Jesus82 commented Jan 26, 2021

  • vuex-persistedstate version: 3.2.0
  • node version: 12.16.3
  • npm (or yarn) version: 6.14.10

Relevant code or config
In nuxt.js, I'm trying to delete the data in my cart when arriving to the confirmation page.

index.js

export const state = {
  cart: []
}
export const mutations = {
  resetCart (state) {
    Object.assign(state, { cart: []} )
  }
}

/pages/confirmation/index.vue

methods: {
   deleteCart: function() {
      let self = this
      setTimeout(function(){ 
        self.$store.commit('resetCart');
      })
   }
},
mounted() {
    this.deleteCart()
}

What you did:

I wrote a method deleteCart that commits a mutation in order to reset the cart state. Then used mounted nuxt lifecycle hook to fire the method.

What happened:

If no setTimeout is used, the method works, but persistedState acts after that and overwrites with the previous state. Just using setTimeout I am able to reset the state after persitedState.

Problem description:

It is not very cosistent to use a timeout.

Suggested solution:

Is there any event I could use in order to know that persistedState has done its job and then reset the state? Any solution is welcome. Thanks in advance!

@Jesus82 Jesus82 changed the title Delete Delete persisted state via Nuxt lifecycle hooks Jan 26, 2021
@jcjp
Copy link

jcjp commented Sep 21, 2021

Same issue with you, however for me I do redirection and before I complete my redirection I reset the vuex state to initial state. I do store.commit('RESET') which resets the list of products added to the vuex.

However upon redirection and successful reset, when clicking the back button to return to the website it still retains the product list previously before redirection. Which has been cleared before redirection and should now be an empty.

EDIT: I read the readme of the library and it has an option of fetchBeforeUse set to false by default, I set this to true and it works on my side, so if I clear my localStorage list of products before redirection upon using the back button it will fetch the state of the last localStorage state (which has an empty list of products) it now works properly.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants