如何销毁由< keep-alive>缓存的VueJS组件 [英] How to destroy a VueJS component that is being cached by <keep-alive>

问题描述

我有一个Vue组件，它使用Vue的元素保持活动以进行缓存。但是，我现在遇到的问题是，一旦我退出一个帐户并在我的Vue应用程序上创建一个新帐户，我正在保持活跃的组件正在反映给新用户（显然不是与新用户相关。）

I have a Vue component that's kept alive using Vue's element for caching purposes. However, the problem I am having right now is that once I sign out of one account and create a new account on my Vue application, the component I'm "keeping alive" is being reflected for the new user (which obviously isn't relevant for the new user).

因此，我想在用户退出后销毁该组件。最好的方法是什么？

推荐答案

我已成功解决了以下问题办法。实质上，如果用户已登录，请保持仪表板处于活动状态。否则，不要让仪表板保持活力。我通过观察路线检查每次路线变化时是否登录或退出用户（见下文）。如果您正在阅读本文并拥有更优雅的解决方案 - 我很乐意听到它。

I've managed to solve my issue in the following way. Essentially, if the user is logged in, keep the dashboard alive. Else, don't keep the dashboard alive. I check if the user is logged in or out every time the route changes by "watching" the route (see below). If you are reading this and have a more elegant solution - I'd love to hear it.

以下是我的根组件的代码

<template>
    <div id="app">
        <!-- if user is logged in, keep dashboard alive -->
        <keep-alive
            v-bind:include="[ 'dashboard' ]"
            v-if="isLoggedIn">
            <router-view></router-view>
        </keep-alive>
        <!-- otherwise don't keep anything alive -->
        <router-view v-else></router-view>
    </div>
</template>

<script>
    import firebase from "firebase";

    export default {
        name: 'app',
        data() {
            return {
                isLoggedIn: false // determines if dashboard is kept alive or not
            }
        },
        watch: {
            $route (to, from){ // if the route changes...
                if (firebase.auth().currentUser) { // firebase returns null if user logged out
                    this.isLoggedIn = true;
                } else {
                    this.isLoggedIn = false;
                }
            }
        }
    }
</script>

这篇关于如何销毁由< keep-alive>缓存的VueJS组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！