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，从而实现了非父子组件之间的响应同步。所有源码参考 这里 。