According to the Axios documentation, I am trying to simultaneously retrieve data from two sources on my backend (block.json and type.json) within the actions of my Vuex store. I have declared myBlocks and myTypes as data in my Vuex State. Although I am able to fetch the data successfully, I am facing an issue with assigning the fetched data to the variables in the Vuex state. When I try to reference the state using console.log(state.sample), I get undefined instead of foo. However, when I use console.log(state), it outputs the following result shown in the image linked below. Any suggestions on how to resolve this would be highly appreciated.
https://i.sstatic.net/5iSuY.png
state: {
sample: 'foo',
myBlocks: [],
myTypes: []
},
actions: {
fetchElementColors: function(state) {
function getElementBlockColors() { return axios.get('/element-data/block.json'); }
function getCategoryDataColors() { return axios.get('/element-data/type.json'); }
axios.all([getElementBlockColors(), getCategoryDataColors()])
.then(axios.spread(function(blockData, categoryData) {
console.log(state);
console.log(state.sample);
state.myBlocks= blockData.data;
state.myTypes= categoryData.data;
}));
}
}