Vuex nested objects

Question

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?

I think it might be reactive problem. How do you set and get value of state.user? Please include more vuex actions, mutations. — ittus
– ittus, Commented Jun 9, 2018 at 1:47
Is that just a typo, or do you have a "user" property in your "user" object? If so, shouldn't it be state.user.user.school.name? — Vlad274
– Vlad274, Commented Jun 9, 2018 at 1:50

Relequestual · Accepted Answer · 2018-12-18 10:47:58Z

7

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.

edited Dec 18, 2018 at 10:47

Relequestual

12.4k7 gold badges52 silver badges87 bronze badges

answered Jul 18, 2018 at 18:25

Sojourner

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 04:31:05Z

4

Seems like a Vue reactivity issue, as described in VueJS and Vuex documentations :

https://v2.vuejs.org/v2/guide/reactivity.html

https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules

Vue cannot detect property addition or deletion. You can either declare all your properties with empty values from the start, or use Vue.set(), or replace your state object with a fresh new one using Object.assign() or ES6 spread operator :

state.user = { ...user }

edited Jul 15, 2022 at 4:31

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 30, 2019 at 15:11

Romain

531 silver badge6 bronze badges

Comments

tagurit · Accepted Answer · 2021-09-12 15:03:41Z

1

I have exactly the same problem, indeed the console shows the object is populated, but accessing its child property returns undefined. My code has the same structure (fetching data with axios in an action, then commiting mutation). I have a simple getter:

getters: {
    users: state => state.users,
},

From a component, I perform:

console.log(this.$store.getters.users);
console.log(this.$store.getters.users.preprod);

and believe it or not, the output is:

> {…}
    __ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
    preprod: Array(4) [ {…}, {…}, {…}, … ]
    <prototype>:  Object { … }
> undefined

The only clue I have for the moment is that these values are gotten from a script called cjs.js located at wbepack-internal:///./node_modules/cache-loader/dist/cjs.js. So may this be an issue with webpack caching?

edited Sep 12, 2021 at 15:03

tagurit

5786 silver badges16 bronze badges

answered Jul 10, 2018 at 10:26

ekqnp

3943 silver badges13 bronze badges

1 Comment

ekqnp Over a year ago

I have this problem because in my store state, I only declared users as an empty object : users: {}. Prefilling my object: users: { preprod: null } is a sucessful workaround. This may have an explaination – if one knows, could you provide it ?

Collectives™ on Stack Overflow

Vuex nested objects

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related