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是后来创建的实例，与构造函数中的不是同一个，所以获取到的一直是空。