首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定，简单的非父子组件通信用 bus（一个空的 Vue 实例）。那么使用 vuex 就是为了解决复杂的非父子组件通信。
仅仅会使用 vuex 没什么，看过文档敲敲代码大家都会。难道你就不想知道 vuex 是如何实现的？！
抛开 vuex 的源码，我们先来想想如何实现一个简单的 "vuex"。有多简单呢，我不要 getter、mutation、action 等，我只要 state 就行了。
非父子组件通信
在实现之前，我们得来温故一下 bus 的实现，借用官网的例子：
bus.$emit('id-selected',1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected',function (id) {
// ...
})
遥想当年，实例化后的 bus 不知放哪好，最后无奈将其放到了 window 下，一直 window.bus 的使用。虽然这样也没问题，但还是影响到了全局作用域。
突然的某一天，我发现可以挂载在 vue 的根实例下（从此告别 window.bus），于是便有了：
app.$options.bus
// or
this.$root.$options.bus
然后又发现了，bus 其实不只是 on 事件才可以通信。其实 bus 是一个 Vue 实例，其中 data 是响应的。比如在 app 这个根实例下有两个非父子组件，都使用到了 bus 的 data，那么它们是响应同步的。
以上，子组件 a 修改了 count，如果子组件 b 有用到 count，那么它就能响应到最新 count 的值。
说了这么多，你还没发现吗？这个不就是实现了非组件之间通信，vuex 的 state 吗？！
封装 bus
是的，把刚刚的 bus 封装一下，这个就是一个最简单的 "vuex" （仅仅只有 state 的功能）。首先，我们将有一个根实例 app ，实例下有两个非父子组件 childA 和 childB 。
html 代码的实现如下：
