在 Vue.js 中保持组件存活答案

【问题标题】：Keep component alive in Vue.js在 Vue.js 中保持组件存活
【发布时间】：2019-07-13 04:03:02
【问题描述】：

我正在使用 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>

这里会发生什么：

加载页面（查看--）
接收一个 MQTT 值（看到“80 bpm”）
切换到另一个页面
我的 Mixin 的方法 beforeDestroy 被调用
切换回仪表板
我的 Mixin 的方法 created 被调用
我看到-- 就好像我从未收到任何消息一样。

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

【问题讨论】：

你以什么方式使用<keep-alive>，只能在动态组件上或<router-view>标签周围使用。
您可以将小部件数据存储在全局存储中，并在重新挂载组件时重复使用。
@8bit 对，<keep-alive> 放在 <router-view> 周围时可以工作，但在这种情况下，它会保持我所有组件的活动状态。我只是想让那些使用我的 Mixin 的人活着。
@nowox 您可以包含或排除应使用keep-alive 缓存的组件，请参阅here
无论您得到什么“值（80 bpm）”，都尝试在创建组件之前获取它。因此，每当您在安装组件之前切换选项卡时，您都可以在创建的函数中编写逻辑（存储“值”）。（如果保持活力不起作用）

标签： javascript vue.js

【解决方案1】：

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

vue js docs keep alive

vue js keep alive

【讨论】：

正如我的问题中提到的，我尝试在我的组件周围使用 keep-alive，但它不起作用。