Vue与Vuex:是否可以在商店内注入/弹出组件?

时间:2018-10-09 15:12:54

标签: javascript vuejs2 vuex flux

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

  • 我正在使用路由器,现在只有一条路由,它使用组件Home
  • “我的主页”组件看起来像这样(没什么特别的):

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

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

  • 我有一个后端,我必须对其进行一些API调用,并与用户操作一起控制要向UI中注入/弹出的组件

  • 也就是说,我不希望它们已经声明要显示/隐藏,而是要根据我的Vuex商店中的操作来控制它们是否在该div中。

  • 为什么?因为我希望能够在跟踪由Vue DevTools进行的操作引起的变异时跟踪它们,所以这将使我能够完全控制我的应用程序,例如:

    • MUTATION1
    • ADD_COMPONENT_1
    • MUTATION2 ...
    • REMOVE_COMPONENT_1

请纠正我,如果我需要澄清自己的话,有没有办法做到这一点? (任何链接,来源均受到高度赞赏)

1 个答案:

答案 0 :(得分:3)

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

这将允许您根据状态动态渲染组件。

如果要更改整个页面或页面的大部分,则可能需要vue-router和一个<router-view>