Vuex原理实现

Posted shenjp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vuex原理实现相关的知识，希望对你有一定的参考价值。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

思考问题

  1. Vuex 只在更实例引入了，那么它是如何在每个子组件中都能使用的？
  2. Vuex 是一个插件，为什么更改了Vuex中的state，会触发视图的跟新？

vuex原理

vuex 是vue的状态管理工具，目的是为了更方便实现多个组件之间的状态共享

vuex的工作原理, Vuex 官方文档 技术图片

vuex实现

  1. 新建一个vuex文件，导出一个store对象

    let Vue;
class Store {

}
const install = (_Vue) => {
  Vue = _Vue;
}

export default {
// 这方法在use的时候默认会被调用
  install,
  Store
}

     

  2. 使用混合，在创建组件之前，将vuex实例挂载到vue的实例上

    Vue.mixin({
beforeCreate() {
  // 需要拿到store,给每个组件都增加 $store 属性
  // 为什么不直接给Vue.prototype 上增加？是因为可能会new 好多个Vue的实例，在别的实例上不需要store
  if (this.$options && this.$options.store) {
    this.$store = this.$options.store;
  } else {
    // 这里判断一下，如果单独创建了一个实例没有parent
    this.$store = this.$parent && this.$parent.$store;
  }
}
});

     

  3. 获取new Store传入的对象

    class Store {
  constructor(options = {}) {
    // 将用户的状态放入到 store 中
    this.state = options.state;

    // 获取计算属性
    let getters = options.getters;
    this.getters = {};
    Object.keys(getters).forEach(getterName => {
      Object.defineProperty(this.getters, getterName, {
        get: () => {
          return getters[getterName](this.state);
        }
      });
    });
  }
}

  4. 将state的数据变成响应式的数据

    class Store {
  constructor(options = {}) {
    // Vuex 的核心，定义了响应式变化，数据更新之后更新视图
    this._vm = new Vue({
      data() {
        return {
          state: options.state
        };
      }
    });
  }
  // 类的属性访问器
  get state() {
    return this._vm.state;
  }
}

  5. 通过触发 mutations 更改状态

    // 通过 this.commit() 触发更改
mutations: {
  syncAdd(state, payload) {
    state.age += payload;
  }
}

// 通过发布订阅的模式
class Store {
  constructor(options = {}) {
    let mutations = options.mutations;
    this.mutations = {};
    Object.keys(mutations).forEach(mutationName => {
      // 订阅所有的mutations
      this.mutations[mutationName] = (payload) => {
        // 内部的第一个参数是状态
        mutations[mutationName](this.state, payload);
      }
    });
  }
  // 提交更改，会在当前的 store 上找到对应的函数执行
  // 发布
  commit = (mutationName, payload) => { // 保证this
    this.mutations[mutationName](payload);
  }
}

  6. 内部封装的 forEach, 减少重复代码

    const forEachValue = (obj, fn) => {
  Object.keys(obj).forEach(key => {
    fn(key, obj[key]);
  });
};

// 对上面的 getters 改造下
forEachValue(getters, (gettersName, fn) => {
  Object.defineProperty(this.getters, getterName, {
    get: () => {
      return fn(this.state);
    }
  });
});

// 对上面的mutations 改造下
forEachValue(mutations, (mutationName, fn) => {
  this.mutations[mutationName] = (payload) => {
    fn(this.state, payload);
  }
})

  7. 通过触发 action 异步跟新转态

    action 异步提交更改，异步操作完之后提交到mutation中
例：
    actions: {
  asyncMinus({ commit }, payload) {
    setTimeout(() => {
      commit(‘syncMinus‘, payload);
    }, 1000);
  }
}
mutations: {
  syncMinus(state, payload) {
    state.age -= payload;
  }
}

// 也是一个发布订阅模式
class Store {
  constructor(options ={}) {
    let actions = options.actions;
    this.actions = {};
    forEachValue(actions, (actionName, fn) => {
      this.actions[actionName] = (payload) => {
        fn(this, payload);
      }
    });
  }
  dispatch = (actionName, payload) => {
    // 源码里有一个变量，来控制是否是通过mutation 来更新的转态，不是会抛个警告
    this.actions[actionName](payload);
  }
} 
    vuex简单实现 
    let Vue;
const forEachValue = (obj = {}, fn) => {
  return Object.keys(obj || {}).forEach(key => {
    fn(key, obj[key]);
  })
}
class Store {
  constructor(options = {}) {
    this._vm = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    });

    let getters = options.getters;
    this.getters = {};
    forEachValue(getters, (getterName, fn) => {
      Object.defineProperty(this.getters, getterName, {
        get: () => {
          return fn(this.state);
        }
      });
    });

    // mutations
    let mutations = options.mutations;
    this._mutations = {};
    // 订阅
    forEachValue(mutations, (mutationName, fn) => {
      this._mutations[mutationName] = (paylod) => {
        fn(this.state, paylod);
      }
    });

    // actions
    let actions = options.actions;
    this._actions = {};
    forEachValue(actions, (actionName, fn) => {
      this._actions[actionName] = (paylod) => {
        fn(this, paylod);
      }
    });
  }
  // 发布
  commit = (mutationName, paylod) => {
    this._mutations[mutationName](paylod);
  }
  dispatch = (actionName, paylod) => {
    this._actions[actionName](paylod);
  }
  get state() {
    return this._vm.state;
  }
}
const install = (_Vue) => {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store;
      } else {
        this.$store = this.$parent && this.$parent.$store;
      }
    }
  });
}

export default  {
  install,
  Store
};

     

  8. modules的实现

    主要是将mosules里面的数据格式化成我们想要的格式 js { _modules: { root: state: {__ob__: Observer} _children: {} _rawModule: {modules: {…}, state: {…}, getters: {…}, mutations: {…}, actions: {…} } }

    • 数据格式化
    // 在 Store 中定义modules
this._modules = new ModuleCollection(options); // 把数据格式化成我们想要的结构

class ModuleCollection {
  constructor(options) { // 模块依赖的收集
    this.register([], options); // 注册模块，将模块注册成树结构
  }
  register(path, rootModule) {
    let module = { // 将模块格式化
      _rawModule: rootModule,
      _children: {},
      state: rootModule.state
    }
    if (path.length === 0) { // 如何是根模块 将这个模块挂载到根实例上
      this.root = module;
    } else {
      // 递归都用reduce方法, 通过_children 属性进行查找
      let parent = path.slice(0, -1).reduce((root, current) => {
        return root._children[current];
      }, this.root);
      parent._children[path[path.length - 1]] = module;
    }
    // 看当前模块是否有modules
    if (rootModule.modules) { // 如果有modules 开始重新注册
      forEachValue(rootModule.modules, (moduleName, module) => {
        this.register(path.concat(moduleName), module);
      })
    }
  }
}
    • 安装模块
    installModule(this, this.state, [], this._modules.root);

  // 安装模块
  const installModule = (store, rootState, path, rootModule) => {
    // 将state 挂载到根上
    if (path.length > 0) {
      let parent = path.slice(0, -1).reduce((root, current) => {
        return root[current];
      }, rootState);
      // vue 不能再对象上增加不存在的属性，否则视图不会更新
      // parent.path[path.length - 1] = rootModule.state;
      Vue.set(parent, path[path.length - 1], rootModule.state);
    }
    // getters
    let getters = rootModule._rawModule.getters;
    if (getters) {
      forEachValue(getters, (getterName, fn) => {
        Object.defineProperty(store.getters, getterName, {
          get() {
            // 让getters 执行，将自己的状态传入
            return fn(rootModule.state); // 将对应的函数执行
          }
        });
      });
    }
    // mutations
    let mutations = rootModule._rawModule.mutations; // 拿到每个模块里的mutations
    if (mutations) {
      forEachValue(mutations, (mutationName, fn) => {
        let mutations = store._mutations[mutationName] || [];
        mutations.push((paylod) => {
          fn.call(store, rootModule.state, paylod);
          // 发布，让所有的订阅依次执行
          store._subscribes.forEach(fn => fn({ type: mutationName, paylod }, rootState))
        });
        store._mutations[mutationName] = mutations;
      });
    }
    // actions
    let actions = rootModule._rawModule.actions; // 拿到每个模块里的mutations
    if (actions) {
      forEachValue(actions, (actionName, fn) => {
        let actions = store._actions[actionName] || [];
        actions.push((paylod) => {
          fn.call(store, store, paylod);
        });
        store._actions[actionName] = actions;
      });
    }
    // 循环挂载儿子
    forEachValue(rootModule._children, (moduleName, module) => {
      installModule(store, rootState, path.concat(moduleName), module);
    });
  }

     

    vuex完整实现 
    let Vue;
const forEachValue = (obj = {}, fn) => {
  return Object.keys(obj || {}).forEach(key => {
    fn(key, obj[key]);
  });
}
class ModuleCollection {
  constructor(options) { // 模块依赖的收集
    this.register([], options); // 注册模块，将模块注册成树结构
  }
  register(path, rootModule) {
    let module = { // 将模块格式化
      _rawModule: rootModule,
      _children: {},
      state: rootModule.state
    }
    if (path.length === 0) { // 如何是根模块 将这个模块挂载到根实例上
      this.root = module;
    } else {
      // 递归都用reduce方法, 通过_children 属性进行查找
      let parent = path.slice(0, -1).reduce((root, current) => {
        return root._children[current];
      }, this.root);
      parent._children[path[path.length - 1]] = module;
    }
    // 看当前模块是否有modules
    if (rootModule.modules) { // 如果有modules 开始重新注册
      forEachValue(rootModule.modules, (moduleName, module) => {
        this.register(path.concat(moduleName), module);
      })
    }
  }
}
// 安装模块
const installModule = (store, rootState, path, rootModule) => {
  // 将state 挂载到根上
  if (path.length > 0) {
    let parent = path.slice(0, -1).reduce((root, current) => {
      return root[current];
    }, rootState);
    // vue 不能再对象上增加不存在的属性，否则视图不会更新
    // parent.path[path.length - 1] = rootModule.state;
    Vue.set(parent, path[path.length - 1], rootModule.state);
  }
  // getters
  let getters = rootModule._rawModule.getters;
  if (getters) {
    forEachValue(getters, (getterName, fn) => {
      Object.defineProperty(store.getters, getterName, {
        get() {
          // 让getters 执行，将自己的状态传入
          return fn(rootModule.state); // 将对应的函数执行
        }
      });
    });
  }
  // mutations
  let mutations = rootModule._rawModule.mutations; // 拿到每个模块里的mutations
  if (mutations) {
    forEachValue(mutations, (mutationName, fn) => {
      let mutations = store._mutations[mutationName] || [];
      mutations.push((paylod) => {
        fn.call(store, rootModule.state, paylod);
        // 发布，让所有的订阅依次执行
        store._subscribes.forEach(fn => fn({ type: mutationName, paylod }, rootState))
      });
      store._mutations[mutationName] = mutations;
    });
  }
  // actions
  let actions = rootModule._rawModule.actions; // 拿到每个模块里的mutations
  if (actions) {
    forEachValue(actions, (actionName, fn) => {
      let actions = store._actions[actionName] || [];
      actions.push((paylod) => {
        fn.call(store, store, paylod);
      });
      store._actions[actionName] = actions;
    });
  }
  // 循环挂载儿子
  forEachValue(rootModule._children, (moduleName, module) => {
    installModule(store, rootState, path.concat(moduleName), module);
  });
}
class Store {
  constructor(options = {}) {
    this._vm = new Vue({
      data() {
        return {
          state: options.state
        }
      }
    });
    this.getters = {};
    this._mutations = {};
    this._actions = {};
    this._subscribes = [];
    this._modules = new ModuleCollection(options); // 把数据格式化成一个想要的数据结构

    // 递归将结果分类
    // this 整个store
    // this.state 当前的根状态，把模块中的状态放在根上
    // [] 是为了递归的初始值
    // this._modules.root 是为了从跟模块开始安装
    installModule(this, this.state, [], this._modules.root);

    // plugins
    if (!Array.isArray(options.plugins)) {
      throw new TypeError(‘plugins is not Array‘);
    }
    options.plugins.forEach(fn => fn(this));
  }
  // 发布
  commit = (mutationName, paylod) => {
    this._mutations[mutationName].forEach(fn => fn(paylod));
  }
  dispatch = (actionName, paylod) => {
    this._actions[actionName].forEach(fn => fn(paylod));
  }
  // 订阅所有的plugins
  subscribe = (fn) => {
    this._subscribes.push(fn);
  }
  get state() {
    return this._vm.state;
  }
}
const install = (_Vue) => {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options && this.$options.store) {
        this.$store = this.$options.store;
      } else {
        this.$store = this.$parent && this.$parent.$store;
      }
    }
  });
}

export default  {
  install,
  Store
};

     

以上是关于Vuex原理实现的主要内容，如果未能解决你的问题，请参考以下文章

Vuex原理实现

Vuex原理实现

vuex实现原理

了解Vuex4.x 简单实现原理

vuex实现原理

快速理解 VUEX 原理