Vue基于TypeScript的一次錯(cuò)誤使用分析

概述

在使用Vue基于TypeScript開(kāi)發(fā)項(xiàng)目時(shí)，使用Element UI的Table來(lái)做列表數(shù)據(jù)的渲染。
在實(shí)際的數(shù)據(jù)中，有一列數(shù)據(jù)存儲(chǔ)的是字典的 code ，這種設(shè)計(jì)對(duì)于后端的模型設(shè)計(jì)來(lái)說(shuō)是沒(méi)有問(wèn)題的，我們的數(shù)據(jù)持久化只需要關(guān)注 code 就可以了。
但是前端顯示的過(guò)程中，只顯示 code 值，對(duì)用戶來(lái)說(shuō)是不友好的。對(duì)于用戶來(lái)講，他們需要的是可讀的數(shù)據(jù)，即 code 對(duì)應(yīng)的中文描述。

思路

這種問(wèn)題通常會(huì)有兩種解決方案：

• 后端處理：返回?cái)?shù)據(jù)集時(shí)提前處理     code 值，將其轉(zhuǎn)換成對(duì)應(yīng)的中文描述
• 前端處理：在渲染表格的過(guò)程中，實(shí)時(shí)的將     code 值轉(zhuǎn)換為對(duì)應(yīng)的中文描述

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

思路

需要處理的列用的是字典值，先從后端將字典數(shù)據(jù)獲取過(guò)來(lái)，在渲染數(shù)據(jù)的時(shí)候，直接使用預(yù)加載的字典內(nèi)容對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換。

錯(cuò)誤的方案

@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;
 }
}

_在構(gòu)造函數(shù)中將數(shù)據(jù)加載進(jìn)來(lái)，可以看到控制臺(tái)有打印字典內(nèi)容。但是在 __covertModul_e 中獲取的 modules 卻讀不到值。

正確的方案

對(duì)上面的內(nèi)容進(jìn)行了改造，如下：

@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;
 }
}

將預(yù)加載的處理遷移到 created() 里面， 此時(shí) covertModule 中可以正常的獲取 modules 值，表格渲染正常。

分析

在TypeScript下開(kāi)發(fā)的Vue組件，屬性變量modules對(duì)應(yīng)著js下的 data() 中的modules，所以在構(gòu)造函數(shù)中對(duì)modules進(jìn)行賦值處理時(shí)，modules還沒(méi)有創(chuàng)建。在covertModule中使用的modules是后來(lái)創(chuàng)建的實(shí)例，與構(gòu)造函數(shù)中的不是同一個(gè)，所以獲取到的一直是空。