Array of Array 的 Vuex 状态未定义答案

【问题标题】：Vuex State of an Array of Array is undefinedArray of Array 的 Vuex 状态未定义
【发布时间】：2019-03-10 17:19:03
【问题描述】：

我在 Vuex 上有一个带有套接字侦听器的商店。此侦听器向状态消息添加一个数组数组。

export const store = new Vuex.Store({
  state: {
    messages: []
  },
  mutations: {
    SOCKET_GET_MESSAGES: (state, data) => {
      state.messages[data[0].recipient] = data[0].res
      // Data[0].recipient = the id of the recipient
      // Data[0].res is an object with a login and a message. 
    },
  }

如果我这样做，我可以在我的控制台中看到结构是正确的：

console.log(this.$store.state.messages)

这个输出：

[__ob__: Observer]
2: Array(5)
 > 0: {login: "w", message: "ABCD", id: 65}
 > 1: {login: "w", message: "Deux", id: 66}
 > 2: {login: "w", message: "Quatre", id: 67}
 > 3: {login: "w", message: "J'envoie au deux", id: 69}
 > 4: {login: "w", message: "Test", id: 70}
length: 5
__proto__: Array(0)
length: 3
__ob__: Observer {value: Array(3), dep: Dep, vmCount: 0}
__proto__: Array

但是，如果我询问特定 ID，我的控制台日志中会出现未定义的情况。例如，我向我的第一个用户询问消息：

   console.log(this.$store.state.messages[2])

你知道如何解决这个问题吗？我在 stackoverflow 和 vuex 文档上阅读了很多东西，但没有找到答案。

提前感谢您的帮助。

【问题讨论】：

您确定在 console.log(this.$store.state.message[1]) 已加载时记录它吗？
@dfsq 是的，我在计算字段和组件中添加了 console.log。我不明白为什么什么都没有出现
请务必在实际加载数据时调用日志，并通过浏览器控制台中的 vue devtools 检查您的商店。
您确定必须定义this.$store.state.messages[1]，因为索引 1 您要求数组中的第二个元素。如果您登录 this.$store.state.messages[0] 会发生什么？
您使用data[0].recipient 作为数组“键”。您确定要从该数组中获取相同的索引吗？ state.messages[1521] 表示数组有那么多项目，除了一个之外都是undefined。需要通过this.$store.state.messages[1521]查询才能得到。

标签： node.js vue.js socket.io vuex

【解决方案1】：

谢谢大家，经过一番研究，我想完成安德烈波波夫的答案。确实如果我们使用Vuex我们需要直接使用：

  Vue.set(state.object, key, data)

this.$set 方法在 Vuex 中不可用。它现在正在使用这种方法。

【讨论】：

【解决方案2】：

您正在直接修改数组，而无需使用任何实际方法。因此 Vue 无法获取您所做的更改。您需要使用 push 或其他一些 Vue 助手，例如 $set。引用一些助手docs：

当您通过直接设置索引（例如 arr[0] = val）或修改其长度属性来修改数组时。同样，Vue.js 也无法获取这些更改。始终使用 Array 实例方法或完全替换它来修改数组。 Vue 提供了一个方便的方法 arr.$set(index, value)，它是 arr.splice(index, 1, value) 的语法糖。

另外，这是所有受支持的变异方法的list（由 Vue 包装）：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

【讨论】：

感谢您的回复。很有趣……你知道在这种情况下如何使用推送功能吗？ ` state.messages.push({data[0].recipient: {message: data[0].res }})` 似乎造成了语法问题。
这里，push 会将消息排入有序索引中。您不能指定索引。它将是state.messages.push({ message: data[0].res})，您将失去映射功能。如果您需要该功能 - 请改用 $set :)