Vuejs:组件之间的共享状态
Vuejs: shared states between components
我想知道在 Vuejs 中实现组件间共享状态的最佳实践。
想象一下情况 A:您有一个显示模式的网络应用程序。模态具有布尔状态 show
。如果单击模态OK-button,则此状态应该更改,但如果单击背景的任何部分,甚至可能在某些服务器上推送状态更改。因此,模态应该能够像 parent app.
一样改变状态
情况 B:您有一个 Web 应用程序,它显示共享公共数据的不同组件内的输入字段 value
。如果用户通过一个组件中的字段更改 value
,它也应该在另一个组件中更新。同样,两者甚至都应该在服务器推送事件上更新。
问题:
A:对于模态组件,我会说 show
应该是一个道具。所以父组件可以随心所欲地控制模态。在这种情况下根本没有共享状态。
模态本身不需要知道服务器的任何信息。如果属性 show
是 true
,则只显示模态,反之亦然。
我认为遮罩层是模态的一部分,所以当遮罩被点击时,模态会发出一个事件。父组件接收事件并可以决定是否隐藏模态框。
Vue这里有官方的模态示例(感谢@craig_h提及):https://vuejs.org/v2/examples/modal.html
B:只需将 vuex 状态绑定到输入。没问题。
注意并不是所有的组件都需要直接访问vuex store。对于一些纯 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 组件...
我想知道在 Vuejs 中实现组件间共享状态的最佳实践。
想象一下情况 A:您有一个显示模式的网络应用程序。模态具有布尔状态 show
。如果单击模态OK-button,则此状态应该更改,但如果单击背景的任何部分,甚至可能在某些服务器上推送状态更改。因此,模态应该能够像 parent app.
情况 B:您有一个 Web 应用程序,它显示共享公共数据的不同组件内的输入字段 value
。如果用户通过一个组件中的字段更改 value
,它也应该在另一个组件中更新。同样,两者甚至都应该在服务器推送事件上更新。
问题:
A:对于模态组件,我会说 show
应该是一个道具。所以父组件可以随心所欲地控制模态。在这种情况下根本没有共享状态。
模态本身不需要知道服务器的任何信息。如果属性 show
是 true
,则只显示模态,反之亦然。
我认为遮罩层是模态的一部分,所以当遮罩被点击时,模态会发出一个事件。父组件接收事件并可以决定是否隐藏模态框。
Vue这里有官方的模态示例(感谢@craig_h提及):https://vuejs.org/v2/examples/modal.html
B:只需将 vuex 状态绑定到输入。没问题。
注意并不是所有的组件都需要直接访问vuex store。对于一些纯 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 组件...