javascript - How to properly clear Vuex state in an application with vue-router?

Question

I have a vuex store which can increase when I walk through pages of my site. Every page has its own store where specific information for this page is stored. I know how to write a function which will be responsible for clearing my state, but I don't understand where to call this function in my code.

Let's say I have 5 pages, where 3 of them own their specific store which should be deleted when I move out of a page, but the other 2 have a common state which should be deleted only when I move out of these pages, but when I move between these 2 - the store should be kept in the state it's now. Data for stores are fetched via AJAX requests.

How do you handle this problem? I was thinking about listening to $route changes, but something makes me feel it's wrong.

My function which clean ups the store (reset_state):

const getDefaultState = () => {
    return {
        widgets: null
    }
}

export const items = {

    state: () => ({
        data: null
    }),
    mutations: {
        reset_state (state) {
            Object.assign(state, getDefaultState())
        }
    },
    actions: {
        resetItems({ commit }) {
            commit("reset_state");
        },
    }
}

Answer 1

You should call your function either inside the beforeDestroy lifecycle hook or inside the beforeRouteLeave hook - depending on whether you wrap your route(s) inside keep-alive.