CONVERTIDOR DE DIVISAS CON VUEX
Este post está creado para probar una de las tecnologías más destacables de vue.js como, en nada más y nada menos, que vuex en una aplicación de convertidor de divisas.
Esta aplicación es la solución para que una compañía de viajes que opera en algunos paises de Europa, Oceanía y en Estados Unidos utilice esta herramienta software para sus clientes.
Lo primero será instalar vuex con el siguiente comando:
npm install vuex@next.
Se crea la tienda, que contendrá en su estado, y el valor de la moneda almacenada en convertidor de divisas de VUEX.
En el componente principal de la aplicación se ha recuperado el valor que está almacenado en el store de vuex del convertidor de divisas. Usando la siguiente sintaxis “this.$store.state.moneda”, se puede mostrar este dato en la aplicación cliente. Para conseguir este resultado se tiene que retornar este valor usando “computed()”.
Ahora el siguiente paso será poder modificar el valor que se introduce en el convertidor de divisas y por este motivo habrá que modificar el state del store. Para ello en el store de VUEX, se añaden las mutaciones que tenga el convertidor en la aplicación.
Se introduce el formulario con el que el usuario podrá interactuar, e introducir datos en la aplicación. El usuario podrá introducir el dinero que deseé al convertidor y elegir la divisa a convertir.
Finalmente cuando se realice la acción en la aplicación de convertir la moneda, almacena ese valor en el store. Para ello:
1. Se dibujará el formulario lógico utilizando v-model, para asociar los valores introducidos por el usuario a los datos que va a utilizar el método de convertidor de divisas del componente de la aplicación .
2. Los datos que están asociados al v-model están definidos en el script vue, devolviendo cada dato dentro de “data ()”.
Nota: El tag del select, se rellena en un bucle de vue, mediante un array de strings, que serán los países que tendrá la agencia de viajes usados el convertidor de divisas.
Se codificará el siguiente método, que hará las operaciones matemáticas dentro del componente y devolverá el valor de la moneda, el cual se ha convertido a la divisa de otro pais.
Por último, como no, se guardará este valor convertido en el store de VUEX, para ello habrá que hacer commit del valor convertido hacia al store, para actualizar el valor del dato que está en el state.
Autor/a: Enrique García-Palacios Blasco
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar
Año académico: 2022-2023
Código / recursos utilizados / Otros datos de interés: https://github.com/Enriquegpb/convertidordivisasvuex