Vue基于TypeScript的一次错误使用分析

概述

在使用Vue基于TypeScript开发项目时，使用Element UI的Table来做列表数据的渲染。
在实际的数据中，有一列数据存储的是字典的 code ，这种设计对于后端的模型设计来说是没有问题的，我们的数据持久化只需要关注 code 就可以了。
但是前端显示的过程中，只显示 code 值，对用户来说是不友好的。对于用户来讲，他们需要的是可读的数据，即 code 对应的中文描述。

思路

这种问题通常会有两种解决方案：

• 后端处理：返回数据集时提前处理     code 值，将其转换成对应的中文描述
• 前端处理：在渲染表格的过程中，实时的将     code 值转换为对应的中文描述

在本次示例中，我们采用前端处理的方式。

思路

需要处理的列用的是字典值，先从后端将字典数据获取过来，在渲染数据的时候，直接使用预加载的字典内容对数据进行转换。

错误的方案

@Component
export default class DictManage extends Vue {
  modules = [];

 constructor() {
   super();
    this.$store.dispatch('dict/fetchModules').then(res => {
      console.log(res);
      this.modules = res;
    }).catch(err => console.error(err));
 }
 
 public covertModule(code): string {
   const module = this.modules.find(it => it.code === code);
   return module ? module.name : code;
 }
}

_在构造函数中将数据加载进来，可以看到控制台有打印字典内容。但是在 __covertModul_e 中获取的 modules 却读不到值。

正确的方案

对上面的内容进行了改造，如下：

@Component
export default class DictManage extends Vue {
 modules: any[] = [];

 created() {
   this.$store
     .dispatch('dict/fetchModules')
     .then(res => {
       this.modules = [...res];
     })
     .catch(err => console.error(err));
 }

 public covertModule(code): string {
   const module = this.modules.find(it => it.code === code);
   return module ? module.name : code;
 }
}

将预加载的处理迁移到 created() 里面， 此时 covertModule 中可以正常的获取 modules 值，表格渲染正常。

分析

在TypeScript下开发的Vue组件，属性变量modules对应着js下的 data() 中的modules，所以在构造函数中对modules进行赋值处理时，modules还没有创建。在covertModule中使用的modules是后来创建的实例，与构造函数中的不是同一个，所以获取到的一直是空。