Question

我在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文档上读了很多东西，但是找不到答案。

预先感谢您的帮助。

Answer 1

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

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

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

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

Answer 2

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

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

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

数组的Vuex状态未定义

2 个答案: