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

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

因此，您需要停止为 state.user.school.name 设置未定义的最低限度。

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

显然，您将希望继续为您需要定义的其他嵌套属性扩展它。

Answer 2

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

\n

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

\n

从一个组件中，我执行：

\n

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

\n

不管你信不信，输出是：

\n

> {\xe2\x80\xa6}\n    __ob__: Object { value: {\xe2\x80\xa6}, dep: {\xe2\x80\xa6}, vmCount: 0 }\n    preprod: Array(4) [ {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, \xe2\x80\xa6 ]\n    <prototype>:  Object { \xe2\x80\xa6 }\n> undefined\n

\n

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

\n