Vue 与 Vuex：是否可以在商店内注入/弹出组件？答案

【问题标题】：Vue with Vuex: is it possible to inject/eject components within the store?Vue 与 Vuex：是否可以在商店内注入/弹出组件？
【发布时间】：2019-03-14 10:11:22
【问题描述】：

我已经阅读了很多文章和文档（我为 ex 找到了一些很棒的资源：@987654321@），所有这些都是为了了解 vuex 的工作原理（何时/为什么我应该使用动作而不是突变等)，我明白了，所以我的例子如下：

我正在使用路由器，现在有一个路由，它使用组件 Home
我的 Home 组件看起来像这样（没什么特别的）：

<template> <div class="home">  </div> </template>

<script> export default { name: 'home' } </script>
我有一个后端，我必须对其进行一些 API 调用，连同用户操作，必须控制将哪些组件注入/弹出到 UI 中
也就是说，我不希望它们已经声明显示/隐藏，我想控制它们是否在该 div 中，具体取决于我的 Vuex 商店中的操作。
为什么？因为我希望能够在跟踪使用 Vue DevTools 的操作完成的突变时跟踪它们，这将使我能够完全控制我的应用程序，例如：
- 突变1
- ADD_COMPONENT_1
- 突变2...
- REMOVE_COMPONENT_1

如果我需要澄清自己，请纠正我，有没有办法做到这一点？（任何链接，来源都非常感谢）

【问题讨论】：

标签： javascript vuejs2 vuex flux

【解决方案1】：

没有更多信息，很难完全理解您的意图。不过，我猜你会发现“动态组件”很有用：https://vuejs.org/v2/guide/components.html#Dynamic-Components

这将允许您根据状态动态呈现组件。

如果您想更改整个页面或大部分页面，那么您可能需要vue-router 和<router-view>

【讨论】：

您好@tato，感谢您抽出宝贵时间回答我的问题和您的回答，我会查看该信息以查看它是否解决了我的问题，我已经改写了我的问题；如果仍然不清楚，太模糊，请告诉我，我会编辑它。
更新：我试过了，但这不是我需要的，但是我将它标记为有用，因为它解决了我与此相关的其他疑问，因此对任何来这里的人都很有用跨度>
状态和视图是两个不同的东西：如果我理解正确，您希望视图反映当前状态（就像所有 Vue.js 应用程序一样）。然后在您的视图（组件）中，您需要根据状态呈现一个组件或另一个组件的代码：路由器视图可以实现这一点，也可以实现动态组件。如果您有一个状态为currentComponent: 'button' 的值，那么在您的视图中，您可以拥有<component :is="currentComponent">，它将呈现一个“按钮”组件。
我测试了这个建议，并像我的需要一样工作，因为将它作为一种状态，我可以拥有我想要的控制级别，对于进一步的用例，我有动态组件的行为似乎是正如预期的那样有用，我会将其标记为已接受，因为我认为没有什么要补充的了，感谢您的时间和详细的解释，非常感谢您对此提供的帮助。