javascript - 在 Vue.js 中保持组件事件

Question

我正在使用 Creative-Tim Dashboard 开发一个小应用程序，我意识到每次从边栏切换页面时，每个页面上加载的组件都会被破坏并重新创建。

我在我的应用程序中使用全局 Vue Mixin 来发送和接收 MQTT 消息。每次切换面板时都会调用方法 created 和 beforeDestroy。

有没有办法:

• 让我的 Mixin 保持活力
• 让我的组件数据保持活跃

例如，我的组件之一是 MQTT 小部件:

<template>
  <Widget :title="title" :subtitle="subtitle" :footer="topic">
      <h1>{{value}}</h1>
  </Widget>
</template>
<script>

import Widget from './Widget.vue'

export default {
  name: 'numeric-widget',
  components: {
    Widget
  },
  props: {
    title: String,
    subtitle: String,   
    topic: String,
    unit: String
  },
  data () {
    return {
      value: '--'
    }
  },
  mounted () {
    // Subscribe method is exposed by a global Vue Mixin
    this.subscribe(this.topic, (topic, payload) => {
      this.value = payload
    })
  }
}
</script>

这里发生了什么:

1. 加载页面(查看 -- )
2. 接收 MQTT 值(参见“80 bpm”)
3. 切换到另一个页面
4. 调用了我的 Mixin 的方法 beforeDestroy
5. 切换回仪表板
6. 调用了我的 Mixin 的方法 created
7. 我看到 -- 就好像我从未收到任何消息一样。

我在很多问题上看到使用 <keep-alive> 可能会有帮助。不幸的是，它似乎不适用于我的情况。

Answer 1

如果您不希望您的组件被销毁并再次重新创建，我认为您可以使用 标签。以下链接可能会有所帮助。

vue js docs keep alive

vue js keep alive