How to reset state values for the component?

Question

I use vuex, and in my page module I set title and content, I arranged a destroyed method to reset them, If I click a different component there is no problem while resetting values but when I click a different static page, component is not destroyed and data is not updated. Is there a way to reset vuex state values for the same component.?

const state = {
  page: {},
};
const getters = {
  page(state) {
    return state.page;
  },
};
const mutations = {
  setAPage (state, pPage) {
    state.page = pPage
    state.errors = {}
  },
  setCleanPage(state){
    state.page = null
  },
  reset(state) {
    const s = state();
    Object.keys(s).forEach(key => {
      state[key] = s[key];
    });
    console.log('state', state)
  }
}

const actions = {
  fetchAPage (context, payload) {
    context.commit("setCleanPage");
    const {slug} = payload;
    return ApiService.get(`pages/${slug}/`)
      .then((data) => {
        context.commit("setAPage", data.data);
      })
      .catch((response) => {
        context.commit("setError", response.data)
      })
  },
  resetAPage(context){
    context.commit("reset");
  }
};
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

and in my component :

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
    name: "Page",
    
    computed: {
    ...mapGetters('pages', {page: 'page'}),
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params /foo/:id, when we
    // navigate between /foo/1 and /foo/2, the same Foo component instance
    // will be reused, and this hook will be called when that happens.
    // has access to >this component instance.
    console.log(to)
    console.log(from)
    console.log(next)

    this.$store.dispatch('pages/resetAPage');
 
  },
  methods: {
    ...mapActions(['pages/fetchAPage']),
  },
  destroyed() {
   this.toggleBodyClass('removeClass', 'landing-page');
   this.$store.dispatch('pages/resetAPage');
  },
  created() {
    this.$store.dispatch('pages/fetchAPage' , this.$route.params) 
  },
};
</script>

How can I reset or update data for the same component ?

Thanks

Answer 1

You can use this package for your resets - https://github.com/ianwalter/vue-component-reset

You can use a beforeRouteLeave guard in your component(s) when you want to catch the navigation away from the route where the component is being used (https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)

The beforeRouteUpdate component guard is called only when the component was used in the current route and is going to be reused in the next route.

Answer 2

I would suggest you watch for that param change.

I don't know how you make use of your params, but you can pass them to your component as props and then add a watcher on them which would call your vuex reset action.

// in your router
// ... some routes
{
  path: "/page/:id",
  props: true, // this passes :id as prop to your component
  component: Page
}

In you component

export default {
  name: "Page",
  props: ["id"],  // your route param
  computed: {
    ...mapGetters('pages', {page: 'page'}),
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component has changed,
    // but this component is reused in the new route.
    // For example, for a route with dynamic params /foo/:id, when we
    // navigate between /foo/1 and /foo/2, the same Foo component instance
    // will be reused, and this hook will be called when that happens.
    // has access to >this component instance.
    console.log(to)
    console.log(from)
    console.log(next)

    this.$store.dispatch('pages/resetAPage');
 
  },
  methods: {
    ...mapActions(['pages/fetchAPage']),
  },
  watch: {
    id() { // watch the id and reset the page if it has changed or add additionnal logic as needed
      this.$store.dispatch('pages/resetAPage');
    }
  },
  destroyed() {
   this.toggleBodyClass('removeClass', 'landing-page');
   this.$store.dispatch('pages/resetAPage');
  },
  created() {
    this.$store.dispatch('pages/fetchAPage' , this.$route.params) 
  },
};