Currently, I am attempting to retrieve objects from an axios response using the
$store.commit('fetchFunction', response.data)computed in App.vue (the root component). Here is my current setup.
auth.js
axios.get('/api/to/userController/id')
.then(response => {
//this is a nice json
console.log(response.data.data);
app.$store.commit('userProfile', response.data.data)
})
.catch(error => {
console.log(error);
});
store.js
state: {
userProfile: {}
},
mutations: {
userProfile (state, payload) {
state.userProfile = payload;
}
},
getters: {
userProfile: state => {
//this is [__ob__: Observer] length: 0
console.log(state.userProfile)}
return state.userProfile;
}
App.vue
created() {
//this is filled with the observer from store.js - Until reload page!
//after reload page - it is null!
console.log();
},
computed: {
userProfile() {
return this.$store.getters.UserProfile;
}
}
The issue I am facing is that the object is becoming an observer and the store does not retain it when I change routes or reload the page. Previously, I had a similar function that worked seamlessly with true and false (used for handling the authentication status with a JWT Token). My struggle lies in passing the object in a more effective manner.