How to set state from an external API in Vuex store - vue.js

Question

In my store.js I init an object
let exchangeRates = {
GBPtoUSD: 0, // American dollar
GBPtoEUR: 0, // Euro
GBPtoCAD: 0, // Canadian dollar
GBPtoINR: 0, // Indian rupee
GBPtoCHF: 0 //Swiss franc
}
Then I am setting its value with
function getExchangeRates() {
return axios.get('https://api.exchangeratesapi.io/latest?base=GBP&symbols=USD,EUR,CAD,CHF,INR')
.then((response)=> {
exchangeRates.GBPtoUSD = response.data.rates.USD;
exchangeRates.GBPtoEUR = response.data.rates.EUR;
exchangeRates.GBPtoCAD = response.data.rates.CAD;
exchangeRates.GBPtoINR = response.data.rates.INR;
exchangeRates.GBPtoCHF = response.data.rates.CHF;
})
.catch((error)=> {console.log(error)})
}
My state gets values assigned like this
state: {
GBPtoUSD: exchangeRates.GBPtoUSD, // American dollar
GBPtoEUR: exchangeRates.GBPtoEUR, // Euro
GBPtoCAD: exchangeRates.GBPtoCAD, // Canadian dollar
GBPtoINR: exchangeRates.GBPtoINR, // Indian rupee
GBPtoCHF: exchangeRates.GBPtoCHF //Swiss franc
}
Then I set up getters, such as
getGBPtoUSD: state => {
return state.GBPtoUSD;
},
The problem is, when later on I am using calling that getter in my component like this
...mapGetters( [ "getGBPtoUSD" ] )
<li class="list-group-item py-3 ">
{{ precise(userInputPrice) }}£ in USD is
{{ precise(userInputPrice * getGBPtoUSD()) }} US dollars
</li>
I am getting getGBPtoUSD as 0 - the initial state.
How do I fix this so that state's value actually get assigned from outside? My approach to doing this clearly does not work.
EDIT1
Ok so doing
exchangeRates.GBPtoUSD = response.data.rates.USD;
console.log(exchangeRates.GBPtoUSD)
logs the correct value of around 1.27. So where am I screwing up?

Answer 1

I've made this example on how to set the state from external service using axios
// main.js
import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import axios from "axios";
Vue.config.productionTip = false;
Vue.use(Vuex);
const store = new Vuex.Store({
// create the state to store the data
state: {
todo: {}
},
// make an asynchronous call to get the data
actions: {
getTodoItem(state, index) {
return axios.get(`https://jsonplaceholder.typicode.com/todos/${index}`);
}
},
// set data in state
mutations: {
setTodo(state, value) {
Vue.set(state, "todo", value);
}
}
});
new Vue({
store, // loads the store
render: h => h(App)
}).$mount("#app");
<!-- App.vue -->
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
computed: {
...mapState(["todo"]),
hasTodo() {
return Object.keys(this.todo).length;
}
},
methods: {
...mapActions(["getTodoItem"]),
...mapMutations(["setTodo"]),
async getTodo() {
// random number between 1 and 200
const index = Math.floor(Math.random() * 200) + 1;
const { data } = await this.getTodoItem(index);
this.setTodo(data);
}
},
mounted() {
this.getTodo();
}
};
</script>
<template>
<div id="app">
<div v-if="hasTodo">Todo: {{ todo.title }}</div>
<b v-else>Loading..</b>
</div>
</template>
https://codesandbox.io/s/vue-template-y69be