Menu
I am working on a app in vue right now that has an object with a few nested objects. Right now in my school object in the user object I can display the school object, but when I try to get the name attribute of the school object I get undefined for the name attribute when it has a value.
This is my state of the application:
{
"user": {
"user": {
"name": "Test",
"email": "[email protected]",
"avatar": "http://www.gravatar.com/avatar/xxxx=300",
"city": null,
"state": null,
"zip": null,
"address": null,
"lat": null,
"long": null,
"school": {
"id": 1,
"about": null,
"header": null,
"name": "Test",
"user_id": 1,
"created_at": "2018-06-06 19:48:16",
"updated_at": "2018-06-06 19:48:16"
},
"following": [],
"followers": [],
"social_networks": [{
"id": 4,
"user_id": 1,
"social_network_id": 1,
"network_url": "test.com/k",
"created_at": "2018-06-06 23:11:09",
"updated_at": "2018-06-06 23:15:19"
}, {
"id": 5,
"user_id": 1,
"social_network_id": 2,
"network_url": "test.com/k",
"created_at": "2018-06-06 23:15:19",
"updated_at": "2018-06-06 23:15:19"
}, {
"id": 6,
"user_id": 1,
"social_network_id": 5,
"network_url": "test.com/k",
"created_at": "2018-06-06 23:16:15",
"updated_at": "2018-06-06 23:16:15"
}]
}
},
"socialNetowrks": {
"available_networks": [{
"id": 1,
"network_name": "Facebook",
"created_at": null,
"updated_at": null
}, {
"id": 2,
"network_name": "Instagram",
"created_at": null,
"updated_at": null
}, {
"id": 5,
"network_name": "Twitter",
"created_at": null,
"updated_at": null
}]
}
}
Here are my getters
const getters = {
name(state){
return state.user.school.name
}
};
const mutations = {
FETCH_USER(state,user){
state.user = user;
}
};
const actions = {
getUser: ({commit}) => {
axios.get('/user').then(response => {
commit('FETCH_USER', response.data);
});
}
}
When I just return the school object I get the object
{
"id": 1,
"about": null,
"header": null,
"name": "Test",
"user_id": 1,
"created_at": "2018-06-06 19:48:16",
"updated_at": "2018-06-06 19:48:16"
}
But when I return state.user.school.name I get undefined. Does Vuex not work if you have nested objects?
887
In the previous Vuex tutorial, we learned that by default, getters, actions, and mutations inside modules are registered under the global namespace, which allows multiple modules to react to the same mutation or action.
Both of these could do the work of Vuex, but they aren't enough to replace Vuex completely. Let's take a look at why Vuex is is still necessary, even in Vue 3. First, Vuex offers advanced debugging capabilities that Vue 3 features does not.
Mapping in Vuex enables you to bind any of the state's properties, like getters, mutations, actions, or state, to a computed property in a component and use data directly from the state. Although we can get the job done with this. $store.state.user.data.name , we can use a map helper to simplify it to this.
Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. As of Vue 3.0, the getter's result is not cached as the computed property does.
I ran in to this problem and resolved it by defining the nested object/property needed when declaring state, even if the value is empty or null to start.
So the minimum you would need to stop getting undefined for state.user.school.name would be.
const state = {
user: {
school: {
name: ''
}
}
}
Obviously you will want to continue to expand that for other nested properties you need defined.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
