Keep component alive in 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:

Load the page (seeing --)
Receive a MQTT value (seeing `80 bpm')
Switching to another page
Method beforeDestroy of my Mixin is called
Switching back to the dashboard
Method created of my Mixin is called
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.

In what manner did you use <keep-alive>, you can only use it on dynamic components or around the <router-view> tag. — 8bit
You can store the widget data in a global store and reuse it when the component is re-mounted. — Özgür Uysal
@8bit Right, the <keep-alive> works when placed around <router-view> but in this case it will keep alive ALL my components. I just would like to keep alive those that use my Mixin. — nowox
@nowox You can include or exclude components which should be cached with keep-alive, see here — 8bit
whatever "value(80 bpm)" you are getting try to get that before component is created. So that whenever you switch tabs before component is mounted you can write logic inside created function( store "value"). (if keep alive is not working) — PALLAMOLLA SAI

PALLAMOLLA SAI PALLAMOLLA SAI · Accepted Answer · 2019-02-19T15:39:42

I think you can use tag 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

Keep component alive in Vue.js

1 Answers