Монтируется только один раз в динамическом компоненте

Question

В моем App.vue

я использую динамический компонент для рендеринга динамического компонента из Vuex

<component :is="$store.getters.getDynamicComponent"></component>

, затем в моем Home.vue

<v-card @click="showDetails">
  <v-card-title primary-title>
     <div class="mb-0 text-truncate"> {{name}} </div>
  </v-card-title>
</v-card>

import Details from '@/components/UI/Details';

export default {
  name: 'Home',
  methods: {
    showDetails() {
      console.log('Mount Dynamic Component');
      this.$store.commit('SET_DYNAMIC_COMPONENT', Details);
    }
  }  
}

затем на Details компонент

export default {
  name: 'Details',
  mounted: {
    console.log('This component has been mounted');
  }
}

Установленный триггер жизненного цикла только один раз, когда я щелкаю карточку в Home.vue Я ожидаю, что каждый раз, когда я щелкаю карточку, она должна печатать

Mount Dynamic Component

и

This component has been mounted

Answer 1

Вы можете определить в своем состоянии vuex числовую переменную (т. Е. dynamicComponentKey), которая будет работать как key для динамического компонента, и увеличивать ее в вашей мутации SET_DYNAMIC_COMPONENT.

Это должно вызватьперемонтирование компонента при смене ключа.

Затем в вашем App.vue:

<component :is="$store.getters.getDynamicComponent" :key="$store.getters.getDynamicComponentKey"></component>

Answer 2

Мне удается решить эту проблему, используя обновленный жизненный цикл вместо смонтированного.

В Details компонент

export default {
  updated() {
    if (this.$store.getters.dynamicComponent) {
      console.log('This component has been mounted');
    }
  }
}

@ fabruex решение также работает, но в моем случае я бы предпочел не определять другое состояние в моем vuex только для ключа.