Question

我正在使用vue的应用程序，它有一个带有几个嵌套对象的对象。现在在我的学校对象中，用户对象中我可以显示学校对象，但是当我尝试获取学校对象的name属性时，如果name属性有值，我就会得到未定义的。

这是我申请的状态：

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

我遇到了这个问题，并通过定义声明状态时所需的嵌套对象/属性来解决了该问题，即使该值是空或为空也要启动。

因此，您需要停止获取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

我有完全相同的问题，实际上控制台显示对象已填充，但是访问其子属性返回未定义。我的代码具有相同的结构（在操作中使用axios提取数据，然后进行更改）。我有一个简单的吸气剂：

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

See this screenshot of my console。

我目前唯一的线索是这些值是从位于cjs.js的名为wbepack-internal:///./node_modules/cache-loader/dist/cjs.js的脚本中获得的。 那么这可能是webpack缓存的问题吗？

Vuex嵌套对象

3 个答案: