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

cobish發表於2018-02-07
Vue原始碼

前言

首先我們需要知道為何要使用 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，從而實現了非父子元件之間的響應同步。全部原始碼參考 這裡 。

相關文章