Блог

Главная - Вопросы по программированию - Функция конвертера валют в Vue3

Функция конвертера валют в Vue3

#javascript #vue.js #axios #vuex #vuejs3

Вопрос:

Я пытаюсь реализовать функцию convert() в проекте Vue3.

У меня есть 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}amp;compact=ultraamp;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>

Но это не работает должным образом, я получаю только ожидающий результат обещания… Кто-нибудь может сказать мне, что я делаю не так? Я изучаю Vue и JS….

Комментарии:

1. Мое первое предположение состоит в том, что вычисляемая функция не является асинхронной и вызывает асинхронную функцию, вы, вероятно, захотите использовать наблюдателя, который вызывает функцию, выполняющую запрос, а затем обновляет formattedIrp , которая вместо этого находится внутри data .

Ответ №1:

В вашем коде есть две проблемы.

  1. Логичный вопрос. Нет смысла вызывать ajax внутри вычисляемого свойства, просто используйте обычный метод.
  2. Проблема синтаксиса. Ваша 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>

Комментарии:

1. Спасибо Хайтам, я только изменил created() на updated (), и теперь он работает!

2. Да, created это была ошибка. Это должно быть mounted , если значение irp не изменится или 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}amp;compact=ultraamp;apiKey=${apiKey}`
  ))
}
Метки: