Vue with Vuex: is it possible to inject/eject components within the store?

Question

I've been reading a lot of articles and the docs (some great resources I found for ex: https://coursetro.com/posts/code/144/A-Vuex-Tutorial-by-Example---Learn-Vue-State-Management ), all of that to understand how vuex works ( when/why should I use actions and not mutations, etc), I got it, so my example is the following:

• I'm using router, with one route now, which uses component Home

• My Home component looks like this (nothing special):

  <template> <div class="home"> <!-- Components to inject goes here --> </div> </template>

  <script> export default { name: 'home' } </script>

• I have a backend, to which I have to make some API calls, that together with user actions, have to control which components to inject/eject into the UI

• That said, I don't want them already declared to show/hide, I want to control whether they are inside that div or not, depending on actions in my Vuex store.

• Why? Because I want to be able to track them as I track mutations done by actions with Vue DevTools, this would allow me to have complete control of my app, ex:

  • MUTATION1
  • ADD_COMPONENT_1
  • MUTATION2...
  • REMOVE_COMPONENT_1

Please, correct me if I need to clarify myself, is there a way to accomplish it? (any link, source is highly appreciated)

Answer 1

Without more information it's difficult to fully understand your intentions. However, I guess you will find 'Dynamic Components' useful: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

This will allow you to render components dynamically depending on the state.

If you want to change the whole page or big parts of it, then you probably need vue-router and a <router-view>