首先我們需要知道為何要使用 vuex。父子組件通信用 prop 和自定義事件可以搞定，簡單的非父子組件通信用 bus（一個空的 Vue 實例）。那么使用 vuex 就是為了解決復(fù)雜的非父子組件通信。

僅僅會使用 vuex 沒什么，看過文檔敲敲代碼大家都會。難道你就不想知道 vuex 是如何實現(xiàn)的？！

拋開 vuex 的源碼，我們先來想想如何實現(xiàn)一個簡單的 "vuex"。有多簡單呢，我不要 getter、mutation、action 等，我只要 state 就行了。

非父子組件通信

在實現(xiàn)之前，我們得來溫故一下 bus 的實現(xiàn)，借用官網(wǎng)的例子：

var bus = new Vue()// 觸發(fā)組件 A 中的事件bus.$emit('id-selected', 1)// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件bus.$on('id-selected', function (id) { // ...})

遙想當(dāng)年，實例化后的 bus 不知放哪好，最后無奈將其放到了 window 下，一直 window.bus 的使用。雖然這樣也沒問題，但還是影響到了全局作用域。

突然的某一天，我發(fā)現(xiàn)可以掛載在 vue 的根實例下（從此告別 window.bus），于是便有了：

var app = new Vue({ el: '#app', bus: bus})// 使用 busapp.$options.bus// orthis.$root.$options.bus

然后又發(fā)現(xiàn)了，bus 其實不只是 on 事件才可以通信。其實 bus 是一個 Vue 實例，其中 data 是響應(yīng)的。比如在 app 這個根實例下有兩個非父子組件，都使用到了 bus 的 data，那么它們是響應(yīng)同步的。

var bus = new Vue({ data: {  count: 0 }})

以上，子組件 a 修改了 count，如果子組件 b 有用到 count，那么它就能響應(yīng)到最新 count 的值。

說了這么多，你還沒發(fā)現(xiàn)嗎？這個不就是實現(xiàn)了非組件之間通信，vuex 的 state 嗎？！

封裝 bus

是的，把剛剛的 bus 封裝一下，這個就是一個最簡單的 "vuex" （僅僅只有 state 的功能）。首先，我們將有一個根實例 app ，實例下有兩個非父子組件 childA 和 childB 。

html 代碼的實現(xiàn)如下：

<div id="app"> <child-a></child-a> <child-b></child-b></div>

非父子組件的實現(xiàn)

然后是兩個非父子組件和 app 的實現(xiàn)，子組件都使用到了 bus 的 count，這里用 store.state 表示，跟 vuex 一致：

// 待實現(xiàn)const store = new Store(Vue, { state: {  count: 0 }})// 子組件 aconst childA = { template: '<button @click="handleClick">click me</button>', methods: {  handleClick () {   this.$store.state.count += 1  } }}// 子組件 bconst childB = { template: '<div>count: {{ count }}</div>', computed: {  count () {   return this.$store.state.count  } }}new Vue({ el: '#app', components: {  'child-a': childA,  'child-b': childB }, store: store})