javascript - Vue 与 Vuex : is it possible to inject/eject components within the store?

Question

我已经阅读了很多文章和文档(我为 ex: https://coursetro.com/posts/code/144/A-Vuex-Tutorial-by-Example---Learn-Vue-State-Management 找到了一些很棒的资源)，所有这些都是为了理解 vuex 是如何工作的(什么时候/为什么我应该使用 Action 而不是突变等), 我明白了，所以我的例子如下:

• 我正在使用路由器，现在只有一个路由，它使用组件 Home

• 我的 Home 组件看起来像这样(没什么特别的):

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

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

• 我有一个后端，我必须对其进行一些 API 调用，与用户操作一起，必须控制将哪些组件注入(inject)/弹出到 UI 中

• 就是说，我不希望它们已经声明为显示/隐藏，我想根据我的 Vuex 存储中的操作来控制它们是否在该 div 中。

• 为什么？因为我希望能够在跟踪通过 Vue DevTools 的操作完成的突变时跟踪它们，这将使我能够完全控制我的应用程序，例如:

  • 突变1
  • ADD_COMPONENT_1
  • 突变2...
  • REMOVE_COMPONENT_1

如果我需要澄清自己，请纠正我，有没有办法完成它？ (任何链接，来源非常感谢)

Answer 1

如果没有更多信息，就很难完全理解您的意图。但是，我想您会发现“动态组件”很有用:https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

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

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