Обновите страницы в разделе keep-alive vue.js

Question

У меня есть Vue.js SPA, который использует vue-router.потому что после входа в систему каждая страница должна сохранять состояние (например, введенные фильтры / нумерация страниц). Это делается с помощью keep-alive:

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

Это работает очень хорошо, но когда кто-то выходит из системы и снова входит в систему, я все еще вижуодни и те же значения фильтра из-за поддержки активности.

Можно ли каким-то образом обновлять / очищать сохраненные страницы программно при выходе из системы?

Answer 1

Один из способов использовать глобальное событие Vue.

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

В вашем компоненте запускается событие при нажатии кнопки выхода из системы.

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

В компоненте, который пользователь видит при входе в систему, просто установите все переменные в их значения по умолчанию, прослушивая событие, запущенное 'выйти'.

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

Answer 2

Я не думаю, что есть простой способ сделать это ( программно ), поэтому у вас есть 2 варианта.

Опции 1 будутсбросьте состояние, что означает, что вы внутренне отслеживаете начальное состояние и прослушиваете что-то вроде emit при выходе из системы, чтобы сбросить компонент в его начальное состояние.

Опция 2 будет означать простую заменуиз компонента keep-alive, используя что-то вроде этого:

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

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