Question

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

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

Answer 1

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

以下是我的根组件的代码

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

Answer 2

适用于任何寻求解决方案来破坏缓存的人

在我的注销路径中使用此路由的情况下，在Vue实例中用this。$ root替换router.app，并且$ children索引/嵌套可能与您的应用不同

Property virtualItemAs is not provided by any applicable directive on an embedded template.

Answer 3

如果您的问题是组件仍然保留旧用户的数据，唯一的选择是使用内部重置功能重置它，该功能会以某种方式为新用户重新加载数据。

请参阅： http://jsfiddle.net/paolomioni/hayskdy8/

var Home = Vue.component('Home', {
  template: `<div><h1>{{ title }}</h1>
  <input type="button" value="click to change text" v-on:click="title = Math.random()"">
  <input type="button" value="click to reset component" v-on:click="reset"></div>`,
  data: () => {
    return {
      title: 'BBB'
    }
  },
  methods: {
    reset() {
      this.title = 'BBB'
    }
  }
});

在小提琴中，点击按钮＆＃34;更改文字＆＃34;更改文本：如果您单击复选框两次以切换视图并再次返回，您将看到您生成的数字仍保留在内存中。如果你点击＆＃34;重置＆＃34;按钮，它将被重置为其初始状态。您需要在组件上实现重置方法，并在用户注销或新用户登录时以程序方式调用它。

Answer 4

我遇到了同样的问题，我通过使用一系列缓存的组件和总线事件解决了这个问题。

这是我的HTML keep-alive App.vue：

<keep-alive :include="cachedComponents">
  <router-view></router-view>
</keep-alive>

这是我在created（）生命周期中正在做的事情：

   created() {
      // Push Home component in cached component array if it doesn't exist in the array
      if (!this.cachedComponents.includes('Home')) {
        this.cachedComponents.push('Home')
      }

      // Event to remove the components from the cache
      bus.$on('clearCachedComponents', (data) => {
        // If the received component exist
        if (this.cachedComponents.includes(data)) {
          // Get the index of the component in the array
          const index = this.cachedComponents.indexOf(data)
          // Remove it from the array
          this.cachedComponents.splice(index, 1)
        }
      })
    }

在另一个组件内部，只需触发事件并发送该组件以删除参数即可。

Another.vue

bus.$emit('clearCachedComponents', 'Home')

如果您不知道如何制作公车活动，互联网上有很多类似this的教程可以做到这一点。但是总线事件是我这样做的方式，您可以使用所需的所有功能，例如子发射器或Vuex。我想展示的是使用一组组件来管理您的缓存。您要做的就是添加或删除阵列中的组件。

如何销毁由<keep-alive>

4 个答案: