从实现一个简单的 Vuex 类来了解 Vuex 的工作原理。
实现思路
Vuex 下拥有 install 方法和 Store 类。即创建一个 Vuex 的模块，这个模块导出 install 方法和 Store 类。
install 方法
Vuex 是 Vue 的一个插件，所以需要实现 Vue 插件约定的 install 方 法。
Vue.use 内部会调用 Vuex 对象的 install 方法。
install作用：在 install 中把创建 Vue 根实例时传入的store对象注入到 Vue 实例的$store中。目的是，在所有组件中可以通过this.$store获取到 Vuex 中的仓库。
然而在 install 方法中无法拿到 Vue 的实例对象(vm)。
怎么解决呢？
Vuex 中通过混入 beforeCreate 来获取 Vue 实例。
部分代码如下所示：
function install(Vue) {// 将Vue实例传递给一个局部变量，以便在函数范围内使用_Vue = Vue;// 通过混入beforeCreate来获取Vue实例，从而拿到选项中的store对象_Vue.mixin({beforeCreate() {if (this.$options.store) {this.$store = this.$options.store;} else if (this.$options.parent && this.$options.parent.$store) {this.$store = this.$options.parent.$store}},});
}
每个组件实例在创建之前，都会检查是否有store选项，如果有，则将其注入到组件实例的$store属性中。如果没有，它会在组件的父级链中查找$store属性。
Store 类
首先 store 是一个类，它的构造函数接受一个对象作为参数，这个对象中的属性就是我们熟悉的 state、getters、mutations、actions。
- 实现构造函数，接收 options。
- state 的响应式处理。
- getterrs 的实现。
- commit、dispatch 方法。
注意：
下面代码对 getters 处理中：
其中this.getters = Object.create(null)，此处不直接写this.getters = getters，是因为下面的代码中要方法 getters 中的 key 如果这么写的话，会导致 this.getters 和 getters 指向同一个对象，当访问 getters 的 key 的时候，实际上就是访问 this.getters 的 key 会触发 key 属性的 get，会产生死递归。
class Store {constructor(options) {const { state = {}, getters = {}, mutations = {}, actions = {} } = options;this.state = _Vue.observable(state);// 此处不直接 this.getters = getters，会产生死递归this.getters = Object.create(null);Object.keys(getters).forEach((key) => {Object.defineProperty(this.getters, key, {// 箭头函数 返回通过key在getters中获取到的方法的执行 结果get: () => getters[key](this.state), // 这里是state如何传到getters中的});});// mutations actions都是内部属性，不希望外部直接访问到this._mutations = mutations;this._actions = actions;}commit(type, payload) {this._mutations[type](this.state, payload);}dispatch(type, payload) {this._actions[type](this, payload);}
}
完整结构
Vue 中使用 Vuex 示例如下：
store–index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({state: { count: 0, msg: "Hello World" },getters: {reverseMsg(state) {return state.msg.split("").reverse().join("");},},mutations: {increate(state, payload) {state.count += payload.num;},},actions: {increate(context, payload) {setTimeout(() => {context.commit("increate", { num: 5 });}, 2000);},},
});
myvuex–index.js
let _Vue = null;class Store {constructor(options) {const { state = {}, getters = {}, mutations = {}, actions = {} } = options;this.state = _Vue.observable(state);// 此处不直接 this.getters = getters，会产生死递归this.getters = Object.create(null);Object.keys(getters).forEach((key) => {Object.defineProperty(this.getters, key, {// 箭头函数 返回通过key在getters中获取到的方法的执行 结果get: () => getters[key](this.state), // 这里是state如何传到getters中的});});// mutations actions都是内部属性，不希望外部直接访问到this._mutations = mutations;this._actions = actions;}commit(type, payload) {this._mutations[type](this.state, payload);}dispatch(type, payload) {this._actions[type](this, payload);}
}function install(Vue) {// 将Vue实例传递给一个局部变量，以便在函数范围内使用_Vue = Vue;// 通过混入beforeCreate来获取Vue实例，从而拿到选项中的store对象_Vue.mixin({beforeCreate() {if (this.$options.store) {this.$store = this.$options.store;} else if (this.$options.parent && this.$options.parent.$store) {this.$store = this.$options.parent.$store}},});
}// 导出模块
export default {Store,install,
};
)
