After making my action asynchronous, I encountered a problem where the dispatch is not working as expected. Every time I dispatch the action, it seems to immediately enter the catch block with the value of false. Here is the section of code from my page where I trigger the action using the mounted hook (I also tried using created):
mounted () {
this.$store.dispatch('productById', this.$route.params['id']).then((response) => {
this.product = response
})
.catch(err => {
console.log(err)
})
}
Below is the code snippet for my action function:
async productById ({commit}, payload) {
const AuthStr = await getAdminOrRespondentAuth()
return new Promise((resolve, reject) => {
commit(PRODUCT_BY_ID)
axios.get(`${API_BASE}/products/${payload}`, {
params: {
origin: '1'
},
transformRequest: [function (data, headers) {
delete headers.common.Authorization
headers.Authorization = AuthStr
return data
}],
paramsSerializer: params => parseParams(params)
}).then(response => {
if (response.status === 200) {
commit(PRODUCT_BY_ID_SUCCESS, response.data)
resolve(response.data)
} else {
reject(response)
}
})
.catch(err => {
if (err.response.data.idStatus === 1) {
commit(PRODUCT_BY_ID_SUCCESS, err.response.data.data)
reject(err)
}
})
})
}
Upon entering the mounted hook in Vue, the action gets dispatched but immediately hits the catch block without executing my action. This issue only occurs when the action is set to async.
Interestingly, everything works fine when the action is synchronous. However, changing it back to sync is not an option as I require the action to be async due to the getAdminOrRespondentAuth function's dependency on an async method for user retrieval.
What am I missing here?