Vuex 嵌套对象答案

【问题标题】：Vuex nested objectsVuex 嵌套对象
【发布时间】：2018-11-19 01:53:38
【问题描述】：

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

这是我的应用程序状态：

{
 "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 会不会工作？

【问题讨论】：

我认为这可能是反应性问题。你如何设置和获取state.user 的值？请包含更多 vuex 操作、突变。
这只是一个错字，还是你的“用户”对象中有一个“用户”属性？如果是这样，不应该是state.user.user.school.name吗？
@ittus FETCH_USER(state,user){ state.user = user; },
@Vlad274 在 vuex 中使用模块时就是这样

标签： vue.js vuejs2 vuex

【解决方案1】：

我有完全相同的问题，确实控制台显示对象已填充，但访问其子属性返回未定义。我的代码具有相同的结构（在操作中使用 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

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

【讨论】：

我遇到了这个问题，因为在我的商店状态下，我只将users 声明为一个空对象：users: {}。预填充我的对象：users: { preprod: null } 是一种成功的解决方法。这可能有一个解释——如果有人知道，你能提供吗？

【解决方案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 }

【讨论】：

【解决方案3】：

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

因此，您需要停止为 state.user.school.name 定义未定义的最小值。

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

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

【讨论】：