When I refactor code, I like to split it into three separate files for better organization.
In Users.vue, I have a method called getUsers that looks like this:
getUsers() {
this.isLoading = true
this.$store
.dispatch('auth/getValidToken')
.then((data) => {
this.$store
.dispatch('user/fetchUsers', data.jwt)
.then((response) => {
console.log('DATA RESPONSE 2', response)
this.items = response
this.isLoading = false
})
.catch((error) => {
console.log(error)
})
})
.catch((error) => {
this.$router.push('/pages/login')
console.log(error)
})
},
In user.js file, I have an action defined as follows:
fetchUsers(context, jwt) {
return UserService.getUsers(jwt)
},
Lastly, in UserServices.js file, I have a function to call the API:
async getUsers(jwt) {
apiUsers.defaults.headers.common['jwt'] = jwt
await apiUsers.get('/users').then((response) => {
console.log('DATA RESPONSE 1', response.data)
let data = response
return data
})
},
I added console log messages to track the API response. DATA RESPONSE 1 shows me the expected object with users data, but unfortunately, DATA RESPONSE 2 displays 'undefined'.
Being a beginner in VueJS, any help or guidance would be greatly appreciated.