首先我們需要知道為何要使用 vuex。父子元件通訊用 prop 和自定義事件可以搞定，簡單的非父子元件通訊用 bus（一個空的 Vue 例項）。那麼使用 vuex 就是為了解決複雜的非父子元件通訊。

僅僅會使用 vuex 沒什麼，看過文件敲敲程式碼大家都會。難道你就不想知道 vuex 是如何實現的？！

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

非父子元件通訊

在實現之前，我們得來溫故一下 bus 的實現，借用官網的例子：

`var` `bus =` `new` `Vue()`
`// 觸發元件 A 中的事件`
`bus.$emit(``'id-selected'``, 1)`
`// 在元件 B 建立的鉤子中監聽事件`
`bus.$on(``'id-selected'``,` `function` `(id) {`
`// ...`
`})`
 

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

突然的某一天，我發現可以掛載在 vue 的根例項下（從此告別 window.bus），於是便有了：

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

然後又發現了，bus 其實不只是 on 事件才可以通訊。其實 bus 是一個 Vue 例項，其中 data 是響應的。比如在 app 這個根例項下有兩個非父子元件，都使用到了 bus 的 data，那麼它們是響應同步的。

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

以上，子元件 a 修改了 count，如果子元件 b 有用到 count，那麼它就能響應到最新 count 的值。

說了這麼多，你還沒發現嗎？這個不就是實現了非元件之間通訊，vuex 的 state 嗎？！

封裝 bus

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

html 程式碼的實現如下：

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

非父子元件的實現

然後是兩個非父子元件和 app 的實現，子元件都使用到了 bus 的 count，這裡用 store.state 表示，跟 vuex 一致：

`// 待實現`
`const store =` `new` `Store(Vue, {`
`state: {`
`count: 0`
`}`
`})`
`// 子元件 a`
`const childA = {`
`template:` `'<button @click="handleClick">click me</button>'``,`
`methods: {`
`handleClick () {`
`this``.$store.state.count += 1`
`}`
`}`
`}`
`// 子元件 b`
`const 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`
`})`

看到程式碼裡還有一個 Store 待實現。所需要的引數，因為這裡懶得用 Vue.use() ，所以直接將 Vue 作為引數傳入以供使用，然後第二個引數跟我們使用 vuex 傳入的引數一致。

Store 的實現

接下來就是 Store 的實現，兩步實現：

1. 建立一個 bus 例項；
2. 讓子元件都能訪問到 this.$store。

第 1 步驟上面已經有了，第 2 步驟主要用到了 Vue.mixin 來全域性混入，但僅僅只是找到有 store 的根例項並賦值 Vue 原型上的 store，也能夠讓根例項 app 不用專門寫 mixins 混入。

`class Store {`
`constructor (Vue, options) {`
`var` `bus =` `new` `Vue({`
`data: {`
`state: options.state`
`}`
`})`
`this``.install(Vue, bus)`
`}`
`install (Vue, bus) {`
`Vue.mixin({`
`beforeCreate () {`
`if` `(``this``.$options.store) {`
`Vue.prototype.$store = bus`
`}`
`}`
`})`
`}`
`}`

實現的 Store 就是一個簡單的 "vuex"，它擁有了 vuex 的 state，足夠讓非父子元件之間進行簡單通訊。

在 Store 的建構函式裡建立一個 bus 例項，並將其注入 Vue 的原型，實現了元件都能訪問到 this.store 就是一個 Vue 例項，所以訪問了 this.$store.state.count 實際上就是訪問到了 data，從而實現了非父子元件之間的響應同步。全部原始碼參考這裡 。

本次給大家推薦一個交流圈，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入：582735936，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。