CODEWITHSUNDEEP
statevuejs3keep-alive
tanbog
tanbog

Reputation: 610

Vue3 force reset/clear of keep-alive components

I'm using keep-alive to maintain the state of a multi-step form in Vue3 so users can navigate back and forth as needed.

What I can't figure out, is how to force a clear of the cache. When users complete the form I give them an option to re-start and I currently clear the form submission object and return the users to page 1 of the form but keep-alive is preserving the form state so checkboxes are pre-selected. Is there a call I can make from my reset function to clear the keep-alive cache? Ideally for only some of the form steps, not all.

Upvotes: 0

Views: 3371

Answers (2)

tanbog
tanbog

Reputation: 610

I actually ended up using an entirely different method and thought I would put it here in case it is of use to someone else.

I found it here: https://michaelnthiessen.com/force-re-render/

Basically, a reset of a component can be forced by changing its key value. This has the added benefit of letting you selectively force a re-render of any number of child components.

In the parent.

<PageOne :key="page_one_key">

<script>
export default {
  ...
  data() {
    return {
      page_one_key: 0,
  }
  },
  ...
  methods: {
   myreset(){
     this.page_one_key += 1;
   }
 }
}
</script>

If there are downsides to this approach I would love to know but it seems to work perfectly - allows back/forwards navigation of my form and selective resetting of the cached components.

It is also simple to implement.

Upvotes: 0

devzom
devzom

Reputation: 716

Hard to do.;) There's no built-in method to clear the keepAlive cache.

Looks like the form is not completely reseted but maybe could be enough to destroy the instance of components wrapped in

Are you using key="x" on the component that's wrapped with ? Like:

<KeepAlive>
   <component key="x"/>
</KeepAlive >

reseting the key together with redirecting to 1st page could help. But also to my mind came an idea that You maybe should re-initialize form initialData ex:

<script>
const initialState = () => {
  return {
    name: '',
    surename: '',
    location: {
      name: null,
    },
  };
};

export default {
  data() {
    return initialState();
  },

  methods: {
    reset() {
      Object.assign(this.$data, initialState());
    },
  },
};
</script>

let's dive into

https://learnvue.co/tutorials/vue-keep-alive

Found related issue:

https://stackoverflow.com/a/71766767/10900851 https://github.com/vuejs/vue/issues/6259#issuecomment-436209870

Upvotes: 1

Related Questions