Vuejs：组件之间共享状态

Question

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

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

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

问题：

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

• 这是否不会引入我们从Meteor中了解到的这种危险的（因为难以处理）魔法反应？

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

Answer 1

答：对于模态组件，我认为它show应该是一个 prop。因此父组件可以根据需要控制模态。在这种情况下根本不存在共享状态。

模式本身不需要了解有关服务器的任何信息。如果 propshow是true，则仅显示模态，反之亦然。

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

Vue 这里有一个官方模态示例（感谢 @craig_h 提及）：https ://v2.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 相对年轻，react 社区有更多文档/文章。但 Vue 和 React 都是基于组件的库。如何设计组件的想法基本上是相同的。

您还可以看一下这个 vuex 示例：https ://github.com/vuejs/vuex/tree/dev/examples/chat

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