Vuejs：组件之间的共享状态

Question

我想知道在Vuejs中实现组件之间共享状态的最佳实践。

想象一下情况A：你有一个显示模态的网络应用程序。模态具有布尔状态show。如果单击模态确定按钮，则此状态应更改，但如果单击后台的任何部分，甚至可能在某些服务器上推送状态更改。因此，模态应该能够像父应用程序一样改变状态。

情况B：您有一个Web应用程序，它显示共享公共数据value的不同组件内的输入字段。如果用户通过一个组件中的字段更改value，则还应在另一个组件中更新。两者都应该更新服务器推送事件。

问题：

• 我是对的，正确的方法是使用vuex并使共享状态成为一个存储字段，由所有需要的组件/父级通过发出的操作进行观察和更改修改该值？

• 这不会引入我们从Meteor知道的这种危险（因为难以处理）魔法反应性吗？

• 如何最好地记录流程，具体取决于什么？

Answer 1

A ：对于模态组件，我说show应该是道具。所以父组件可以随心所欲地控制模态。在这种情况下，根本没有共享状态。

模态本身并不需要了解有关服务器的任何信息。如果道具show为true，则只显示模态，反之亦然。

我认为遮罩层是模态的一部分，所以当单击遮罩时，模态会发出一个事件。父组件接收事件并可以决定隐藏模态或不显示。

Vue在这里有一个官方模态示例（感谢@craig_h提及）：https://vuejs.org/v2/examples/modal.html

B ：只需将vuex状态绑定到输入。没错。

请注意，并非所有组件都需要直接访问vuex存储。对于一些纯UI组件，只需使用props。因此，父组件有权控制它们并提高灵活性。

我建议你阅读这些文档：

• https://facebook.github.io/react/docs/lifting-state-up.html
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.j7ry4a3as
• http://redux.js.org/docs/basics/UsageWithReact.html

是的，这些是React / Redux文档。由于Vue相对年轻，反应社区有更多的文档/文章。但Vue和React都是基于组件的库。您如何设计组件的想法基本相同。

您还可以查看此vuex示例：https://github.com/vuejs/vuex/tree/dev/examples/chat

这是一个非常简单的例子，但确实使用了我上面提到的所有内容。发出一个事件，一些纯UI组件......