Vue3의 통화 변환 기능

Vue3의 통화 변환 기능

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를 배우고 있습니다.

코드에는 두 가지 문제가 있습니다.

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>

이것을 시험해 보세요.

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

언급URL : https://stackoverflow.com/questions/68032461/currency-converter-function-in-vue3