vuex 源碼：如何實現一個簡單的 vuex

前言

首先咱們須要知道爲什麼要使用 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 其實不僅是 $emit 和 $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。這樣能夠保證子組件實例建立後不會覆蓋 $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 即 bus 實例。this.$store 就是一個 Vue 實例，因此訪問了 this.$store.state.count 實際上就是訪問到了 data，從而實現了非父子組件之間的響應同步。所有源碼參考 這裏 。