Vuejs：组件之间的共享状态答案

【问题标题】：Vuejs: shared states between componentsVuejs：组件之间的共享状态
【发布时间】：2017-03-12 11:30:36
【问题描述】：

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

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

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

问题：

【问题讨论】：

不确定这是否是正确的，关于 A 的“vuey 方式”：我会将点击处理程序绑定/取消绑定到document，或者可能只在挂载/卸载回调中绑定/取消绑定$parent 和从组件内部关闭模式（不要让应用程序的其余部分处理模式关闭以在外部单击）。
是的，但我想关键问题之一是如何关闭它。我遵循了已接受答案中的建议。

【解决方案1】：

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

模态本身不需要知道任何关于服务器的信息。如果 prop show 是 true，则只显示模态，反之亦然。

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

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

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

请注意，并非所有组件都需要直接访问 vuex 存储。对于一些纯 UI 组件，只需要使用 props 即可。所以父组件有权对其进行控制，增加灵活性。

我建议您阅读这些文档：

是的，这些是 React / Redux 文档。由于 Vue 比较年轻，所以 React 社区有更多的文档/文章。但是 Vue 和 React 都是基于组件的库。设计组件的思路基本相同。

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

【讨论】：