I'm trying to set mutated data from an API inside of the state, the problem is that instead of the data it sets an empty array inside of my state. If I console.log state.user.typeSortedModuleItems, it displays the correct data that should be set. But somehow it sets state.user.typeSortedModuleItems to an empty array when I check Vue.js Devtools.
This is the store action, from here I get the data from the API, the response data goes to setTypeSortedModuleItems.
async getTypeSortedModuleItems({commit}, data) {
let token = localStorage.getItem('authToken')
let urlParams = '?' + qs.stringify(data)
try {
await Api().get('/url/to/api' + urlParams,
{
headers: {
'Accept': 'application/json',
'Authorization': token
}
})
.then(response => {
commit('setTypeSortedModuleItems', response.data)
})
.catch( (error) => {
if (error.response) {
console.log(error.response.data)
console.log(error.response.headers)
} else if (error.request) {
console.log(error.request)
console.log(error.message)
} else {
console.log('Error', error.message)
}
})
} catch (err) {
console.log(err.messages)
}
}
Here I mutate de data and store it to the state, when I console.log 'typeSortedModuleItems' and 'state.user.typeSortedModuleItems' it shows the correct data, but the state doesn't update.
setTypeSortedModuleItems(state, list) {
let typeSortedModuleItems = []
if (list !== null) {
for (let i = 0; i < list.length; i++) {
let moduleType = list[i].ModuleTypeDescription
if (typeSortedModuleItems[moduleType]) {
typeSortedModuleItems[moduleType].push(list[i])
} else {
typeSortedModuleItems[moduleType] = [list[i]]
}
}
} else {
console.log(list)
}
console.log(typeSortedModuleItems)
state.user.typeSortedModuleItems = typeSortedModuleItems
console.log(state.user.typeSortedModuleItems)
}
here's a screenshot of the console end vue devtools. screenshot of the console end vue devtools
I have no idea whats going wrong here, or if the thing i'm trying to do is even possible. I hope for some help/advice. Thanks!