Upon logging in, I am attempting to retrieve user data. However, instead of an array of users, it is returning an Object.
Code
Main component (App.js)
<script>
export default {
data() {
return {
user: ''
}
},
computed : {
isLoggedIn() {
return this.$store.getters.isLoggedIn
}
},
methods: {
logout: function () {
this.$store.dispatch('logout')
.then(() => {
this.$router.push({name: 'home'})
})
}
},
created: function () {
this.user = this.$store.getters.loggedUser
console.log('user data', this.$store.getters.loggedUser) //returns Object
}
}
</script>
Store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
status: '',
token: localStorage.getItem('access_token') || '',
user : {}
},
mutations: {
auth_request(state){
state.status = 'loading'
},
auth_success(state, token, user){
state.status = 'success'
state.token = token
state.user = user
},
auth_error(state){
state.status = 'error'
},
logout(state){
state.status = ''
state.token = ''
},
},
actions: {
login({commit}, user){
return new Promise((resolve, reject) => {
commit('auth_request')
axios({url: '/api/auth/login', data: user, method: 'POST' })
.then(resp => {
const token = resp.data.access_token
const user = resp.data.user
localStorage.setItem('access_token', token)
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
commit('auth_success', token, user)
resolve(resp)
})
.catch(err => {
commit('auth_error')
localStorage.removeItem('access_token')
reject(err)
})
})
},
register({commit}, user){
return new Promise((resolve, reject) => {
commit('auth_request')
axios({url: 'api/auth/register', data: user, method: 'POST' })
.then(resp => {
console.log('register data', resp);
const token = resp.data.access_token
const user = resp.data.user
localStorage.setItem('access_token', token)
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
commit('auth_success', token, user)
resolve(resp)
})
.catch(err => {
commit('auth_error', err)
localStorage.removeItem('access_token')
reject(err)
})
})
},
logout({commit}){
axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.state.token
return new Promise((resolve, reject) => {
axios({url: 'api/auth/logout', method: 'POST' })
.then(resp => {
commit('logout')
localStorage.removeItem('access_token')
localStorage.removeItem('token_type')
delete axios.defaults.headers.common['Authorization']
resolve()
})
.catch(err => {
commit('logout')
localStorage.removeItem('access_token')
localStorage.removeItem('token_type')
delete axios.defaults.headers.common['Authorization']
reject(err)
})
})
}
},
getters: {
isLoggedIn: state => !!state.token,
authStatus: state => state.status,
loggedUser: state => state.user,
}
});
export default store;
Note: In reference to this answer, I have added
to myloggedUser: state => state.user,getters. However, I am only receiving an object and not the expected user data.
Screenshot
https://i.sstatic.net/XbVZb.png
Question
How can I successfully obtain my user data within my component?