在 Vue.js 中保持组件存活

Question

I am using the Creative-Tim Dashboard to develop a small application and I realize the components loaded on each page are destroyed and re-created each time I switch pages from the sidebar.

I use a global Vue Mixin to my application to send and receive MQTT messages. The methods created and beforeDestroy are called each time I switch panels.

Is there a way to:

• Keep my Mixin alive
• Keep my components data alive

As an example one of my component is a MQTT Widget:

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

Here what happens:

1. Load the page (seeing -- )
2. Receive a MQTT value (seeing `80 bpm')
3. Switching to another page
4. Method beforeDestroy of my Mixin is called
5. Switching back to the dashboard
6. Method created of my Mixin is called
7. I see -- as if I never received any message.

I have seen on many question that using <keep-alive> may help. Unfortunately it does not seem to work in my case.

Answer 1

I think you can usetag if you don't want your components to be destroyed and recreated again. Following links might help.

vue js docs keep alive

vue js keep alive