需求描述
应用中很多页面的学生名字不一致，经分析，是因为每个页面调用了不同的接口，各接口返回的学生信息字段、以及页面取得字段不一致，导致了学生姓名显示的不一致。
技术方案
登录以后会进行考勤，把所有学生信息获取到以后存入全局的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>
总结
项目的架构是多层次的，我们可以在任何一层做修改，但是并不是每一种都合适和正确，考虑到维护的成本以及每种框架的思路，从中选择最正确的方式，多层处理结合来实现某一个功能才是对的。
网友评论