Refresh pages in vue.js keep-alive section

Question

I have a Vue.js SPA that uses vue-router. because after logging in each page needs to keep state (like filters/pagination entered) This is done using keep-alive:

<keep-alive>
  <router-view/>
</keep-alive>

This works very well but when somebody logs out and logs in again I still see the same filter values due to the keep alive.

Can I refresh/purge the pages kept alive programatically somehow at logout?

Answer 1

I don't think there is an easy way to do this(programmatically) so you are left with 2 options.

Options 1 would be to reset the state which means you internally keep track of the initial state and listen for something like an emit on logout to reset the component to its initial state.

Option 2 would be to simply swap out the keep-alive component using something like this:

<keep-alive v-if="loggedIn">
    <router-view></router-view>
</keep-alive>

<router-view v-else></router-view>

Answer 2

One way you can use Vue global event.

Vue.prototype.$loginState = new Vue();

In your component fire the event on click logout button.

function logout(){
    //your codes here to logout and then
    this.$loginState.$emit('logout');
}

In component which user sees when logged in just set all variables to their default values by listening event fired 'logout'.

<button @click="resetValues"> Logout </button>
methods: {
    resetValues(){
        this.yourValue = '';
        this.filters = [];
    }
}
created(){
    this.$loginState.$on('logout', this.resetValues)
}