Vue3 中的货币转换器功能

Question

我正在尝试在 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....

Answer 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>

Answer 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}`
  ))
}

Vue3 中的货币转换器功能

Currency Converter function in Vue3

javascript

vue.js

axios

vuex

vuejs3