Vue3 中的货币转换器功能答案

【问题标题】：Currency Converter function in Vue3Vue3 中的货币转换器功能
【发布时间】：2021-09-03 00:45:59
【问题描述】：

我正在尝试在 Vue3 项目中实现一个 convert() 函数。

我有一个 functions.js 文件来存储一些“全局”基本函数

import axios from 'axios'

let functions = {}

functions.convert = async (amount, currencySetting) => {
  const result = await getRate(currencySetting)
  const rateData = result.data
  const rate = rateData[`EUR_${currencySetting}`]
  const converted = rate * amount
  return Math.round(converted)
}

function getRate(currency) {
  const apiKey = process.env.VUE_APP_CURRENCY_API_KEY
  return axios.get(
    `https://free.currconv.com/api/v7/convert?q=EUR_${currency}&compact=ultra&apiKey=${apiKey}`
  )
}

export default functions

我在这样的组件中调用函数

<script>
import functions from '@/functions.js'

export default {
  name: 'SltResult',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  computed: {
    formattedIrp() {
      if (this.data.irp != 'n/a') {
        const currencySetting = this.$store.state.currency.currency
        if (currencySetting != 'EUR') {
            const convertedIrp = functions.convert(this.data.irp, currencySetting)
            return convertedIrp + currencySetting
        } else {
            return this.data.irp + '€'
        }
      }
      return this.data.irp
    }
  }
}
</script>

但它不能正常工作，我只得到一个待处理的 Promise 结果......谁能告诉我我做错了什么？我正在学习 Vue 和 JS....

【问题讨论】：

我的第一个猜测是计算函数不是异步的，它正在调用异步函数，您可能希望使用观察者调用执行请求的函数，然后更新 formattedIrp 这是而不是在data 内。

标签： javascript vue.js axios vuex vuejs3

【解决方案1】：

您的代码有两个问题。

逻辑问题。在计算属性中调用 ajax 是没有意义的，只需使用普通方法即可。
语法问题。您的 convert 函数是异步的，这意味着您需要等待它获取值。

这是您的代码的工作版本：

<script>
import functions from '@/functions.js'

export default {
  name: 'SltResult',
  data: () => ({
    formattedIrp: null,
  }),
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  mounted() {
      if (this.data.irp != 'n/a') {
        const currencySetting = this.$store.state.currency.currency
        if (currencySetting != 'EUR') {
          functions.convert(this.data.irp, currencySetting).then(result => {
            this.formattedIrp = result + currencySetting;
          })
        } else {
            this.formattedIrp = this.data.irp + '€'
        }
      }
      this.formattedIrp = this.data.irp
    }
  }
}
</script>

【讨论】：

感谢 Haitham，我只将 created() 更改为 updated() 并且现在可以正常工作了！
是的，created 是个错误。如果irp 的值不会改变，它应该是mounted，如果值可能会改变，它应该是updated。

【解决方案2】：

试试这个：

const getRate = async (currency) => {
  const apiKey = process.env.VUE_APP_CURRENCY_API_KEY
  return (await axios.get(
    `https://free.currconv.com/api/v7/convert?q=EUR_${currency}&compact=ultra&apiKey=${apiKey}`
  ))
}

【讨论】：