javascript - 如何销毁 <keep-alive> 缓存的 VueJS 组件

Question

我有一个 Vue 组件，它使用 Vue 的元素保持事件状态以进行缓存。但是，我现在遇到的问题是，一旦我注销一个帐户并在我的 Vue 应用程序上创建一个新帐户，我“保持活力”的组件就会反射(reflect)给新用户(这显然不是与新用户相关)。

因此，我想在用户注销后销毁该组件。解决此问题的最佳方法是什么？

Answer 1

我已经设法通过以下方式解决了我的问题。本质上，如果用户已登录，则让仪表板保持事件状态。否则，不要让仪表板保持事件状态。每次路线更改时，我都会通过“观察”路线来检查用户是否登录或注销(见下文)。如果您正在阅读本文并有更优雅的解决方案 - 我很乐意听到。

以下是我的根组件的代码

<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>