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>

这是怎么回事：

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

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

Answer 1

如果您不希望破坏组件并再次创建它们，可以使用标签。跟随链接可能会有所帮助。

vue js docs keep alive

vue js keep alive

在Vue.js中使组件保持活动状态

1 个答案: