码迷，mamicode.com
首页 > 其他好文 > 详细

Vuex原理实现

时间：2020-06-02 22:53:50      阅读：53      评论：0      收藏：0      [点我收藏+]

标签：isarray   register   http   time   commit   sync   ||   执行   注册   

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原理实现

标签：isarray   register   http   time   commit   sync   ||   执行   注册   

原文地址：https://www.cnblogs.com/shenjp/p/13034294.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！