在 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 文档保持活力

vue js保持活力