前端vue: ElementUI源码之flux思想在组件开发table-store.js中的应用

flux 设计思想改变了原有的MVC设计思想带来的多数据流（多C）带来的数据状态的混乱，以及难以追踪记录的现象；它模仿服务端对数据状态的修改：

• 即接收一个url路由,进行路由匹配，如果匹配成功，则在对应handler()中处理相关逻辑操作；
• 如果匹配失败，则对应errorHandler()中处理相关失败逻辑操作；正是这种集中统一的数据处理方式，使得服务端数据管理可控可追踪；

现在流行的VUEX redux等状态管理都是flux思想的实现；

在学习分析ElementUI:table 组件的过程中发现：

• table-store.js中对数据状态的改变和管理也是flux思想的实现，这种优秀的设计思想应该应用到我们自己的组件开发和设计中；

• 下面我们一起来看看table 组件中flux思想是如何实现的，如果你用过vuex,你一定会觉得异常熟悉：

  1. 如图所示：在源码table-store.js中，我们可以看到在函数表达式：

  const TableStore = function(table, initialState = {}) 中申明定义了this.states={}的数据状态对象；

  

      this.states = {
        rowKey: null,
        _columns: [],
        originColumns: [],
        columns: [],
        fixedColumns: [],
        rightFixedColumns: [],
        leafColumns: [],
        fixedLeafColumns: [],
        rightFixedLeafColumns: [],
        leafColumnsLength: 0,
        fixedLeafColumnsLength: 0,
        rightFixedLeafColumnsLength: 0,
        isComplex: false,
        filteredData: null,
        data: null,
        sortingColumn: null,
        sortProp: null,
        sortOrder: null,
        isAllSelected: false,
        selection: [],
        reserveSelection: false,
        selectable: null,
        currentRow: null,
        hoverRow: null,
        filters: {},
        expandRows: [],
        defaultExpandAll: false,
        selectOnIndeterminate: false
      };
  

  2.在TableStore原型上定义了mutations对象，TableStore.prototype.mutations={}； 其中定义了states相关的逻辑函数；如setData(states,data);

3.在TableStore原型上定义了commit方法，如下图所示：

TableStore.prototype.commit = function(name, ...args) {
  const mutations = this.mutations;
  if (mutations[name]) {
    mutations[name].apply(this, [this.states].concat(args));
  } else {
    throw new Error(`Action not found: ${name}`);
  }
};

• 其中参数name就是vuex中的执行动作Action；
• mutations[name]判断mutations对象中是否存在该动作Action对应的方法；如果存在，则执行该方法；不存在则抛出异常“Action not found”
• 通过[this.states].concat(args)传参=》[{},...args];
• 通过object.apply(this,[{},...args]);改变调用方法mutations[name]的this指向；