Vue实现简单汇率转换器优化篇 | 8月更文挑战

2023-11-17 06:57:37

前言

在上一篇文章Vue实现简单汇率转换器中，我们实现了在给定Map数据的条件下进行数据的查询、计算和展示等的操作。今天，我对这个小工具做了一些改进，数据通过访问API接口获取，而不是使用硬编码的Map数据。此外，我还添加了一个事件处理程序，使您可以轻松地更改要转换的货币。最后，我还将代码转换为TypeScript，以使其更易于维护。

优化

我使用以下技术来优化汇率转换器：

响应式数据： 我使用Vue.js的响应式数据功能来跟踪要转换的金额和货币。这允许汇率转换器在数据更改时自动更新。
事件处理： 我添加了一个事件处理程序，使您可以轻松地更改要转换的货币。当您更改货币时，汇率转换器将自动更新显示的金额。
计算属性： 我使用Vue.js的计算属性功能来计算要转换的金额。这允许汇率转换器在数据更改时自动更新显示的金额。
TypeScript： 我将代码转换为TypeScript，以使其更易于维护。TypeScript是一种静态类型语言，可以帮助您捕获错误并使代码更易于阅读。

汇率转换器组件

我还将汇率转换器转换为一个可重用的组件。这使您可以轻松地在您的项目中使用汇率转换器。您可以通过以下方式使用汇率转换器组件：

<template>
  <div>
    <input v-model="amount" placeholder="Amount">
    <select v-model="currency">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
    </select>
    <p>Converted amount: {{ convertedAmount }}</p>
  </div>
</template>

<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import axios from 'axios';

@Component
export default class ExchangeRateConverter extends Vue {
  @Prop() rates!: Map<string, number>;

  amount = 100;
  currency = 'USD';

  get convertedAmount() {
    return this.amount * this.rates.get(this.currency);
  }

  async fetchRates() {
    const response = await axios.get('https://api.exchangeratesapi.io/latest?base=USD');
    this.rates = new Map(Object.entries(response.data.rates));
  }

  mounted() {
    this.fetchRates();
  }
}
</script>