Vuex вложенные объекты

Question

Сейчас я работаю над приложением vue, в котором есть объект с несколькими вложенными объектами.Прямо сейчас в моем школьном объекте в пользовательском объекте я могу отобразить школьный объект, но когда я пытаюсь получить атрибут имени школьного объекта, я получаю неопределенное значение для атрибута имени, когда он имеет значение.

Этомое состояние приложения:

{
 "user": {
  "user": {
   "name": "Test",
   "email": "test@test.edu",
   "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
  }]
 }
}

Вот мои получатели

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);
        });

    }
}

Когда я просто возвращаю школьный объект, я получаю объект

{
 "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"
}

Нокогда я возвращаю state.user.school.name, я получаю неопределенное значение.Разве Vuex не работает, если у вас есть вложенные объекты?

Answer 1

Я столкнулся с этой проблемой и решил ее, определив вложенный объект / свойство, необходимое при объявлении состояния, даже если значение пустое или пустое для начала.

Так что минимум, который вам нужно будет прекратить получатьundefined для state.user.school.name будет.

const state = {
  user: {
    school: {
      name: ''
    }
  }
}

Очевидно, вы захотите продолжить расширять его для других вложенных свойств, которые вам нужно определить.

Answer 2

Похоже на проблему реактивности Vue, как описано в документации VueJS и Vuex:

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

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

Vue не может обнаружить добавление или удаление свойства.Вы можете либо объявить все свои свойства с пустыми значениями с самого начала, либо использовать Vue.set (), либо заменить свой объект состояния новым, используя оператор распространения Object.assign () или ES6:

state.user = { ...user }

Answer 3

У меня точно такая же проблема, действительно, консоль показывает, что объект заполнен, но доступ к его дочернему свойству возвращает undefined.Мой код имеет ту же структуру (выборка данных с аксиосами в действии, затем передача мутаций).У меня есть простой метод получения:

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

Из компонента я выполняю:

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

и верю этому или нет, но вывод:

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

См. Этот снимок экрана моей консоли .

Единственная подсказка, которую я имею на данный момент, заключается в том, что эти значения получены из скрипта с именем cjs.js, расположенного в wbepack-internal:///./node_modules/cache-loader/dist/cjs.js. Так может ли это быть проблемой с кэшированием в веб-пакете?