层次化思考：修改多个组件的技术方案的选择

需求描述

应用中很多页面的学生名字不一致，经分析，是因为每个页面调用了不同的接口，各接口返回的学生信息字段、以及页面取得字段不一致，导致了学生姓名显示的不一致。

技术方案

登录以后会进行考勤，把所有学生信息获取到以后存入全局的store，所有的组件从这里取studentInfo就不会有问题。

于是我们就围绕着这个思路来做技术方案的设计，讨论后，有几种方案：

1.vue指令

从store里面取出学生信息，传入id和要取的字段名，然后渲染学生信息到视图，这个过程可以通过指令来做。

在组件里

2. mixin

因为传入id和key，从store中取出对应的数据，这段逻辑是多组件公共的，可以放到mixin里面，每个组件引入

组件里：

3. vuex的getter

从vuex中取数据，并且传入参数做一些处理，最正确的方式是使用vuex提供的getter

4. httpProxy层的适配

出现问题的根源是不同接口返回的学生信息字段不一致，修改所有的组件是一个思路，还一个思路是在数据到达组件之前，通过一层适配，把所有的变化屏蔽掉，对组件来说是透明的。

经过技术评审，最终我们没有用适配器的方案，因为组件和接口以后要经常修改的，如果使用了适配器，一旦组件或者接口有了变动，适配层也得变动。这种经常变动的情况不适合用适配。

最终我们使用 vuex层的getter + 组件层的mixin来做。

代码实现

具体代码如下：
vuex层

const getters = {
  getStudentInfo: function (state) {
    return function(id, key = 'stuName') {
      const student = state.allStudentList && state.allStudentList.filter((student) => student.id === id);
      if (student[0]) {
        return student[0][key];
      }
      return null;
    }
  }
}

mixin

import {mapGetters} from 'vuex';
export default {
    computed: {
       ...mapGetters(['getStudentInfo'])
    }
}

组件里

import studentInfoMixin from '@/core/mixins/studentInfo-mixin'

export default {
  mixins: [studentInfoMixin]
}

  <div>{{getStudentInfo('id')}}</div>

总结

项目的架构是多层次的，我们可以在任何一层做修改，但是并不是每一种都合适和正确，考虑到维护的成本以及每种框架的思路，从中选择最正确的方式，多层处理结合来实现某一个功能才是对的。