Vue 多个组件使用同样的数据时，如何保持数据同步？

Question

举例：

游戏中存在资源列表、建造、军队列表等等组件，它们都需要 resource 变量。

建造将减少 resource 值的数量，这个变化如何传导到其他组件中呢？

目前的解决方式是：定义一个 localStorage resource，最高级组件获取到，传递到低级组件去，然后低级组件通过 created 来重构 data（此时加入父级的 resource 属性）

组件很多，虽然尽力保持最多三级继承的最初原则，但一个页面有十多个组件都需要 resource，增加一个新的变量，就需要增加十几段一样的代码，耦合程度快把我吓死了。

已经用到的库：

• Vue2 最新版
• Vue-Router 最新版

Answer 1

这个明显是全局对同一个状态修改和监听问题，vuex显然就是为这种场景而生的。

Answer 2

vuex
https://vuex.vuejs.org/zh/