Vuex State of an Array of Array is undefined

Question

I have a store on Vuex with a socket listener. This listener add to the state messages an array of array.

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. 
    },
  }

In my console I can see the structure is correct if I do:

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

with this output:

[__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

But if I ask a specific ID I get undefined in my console log. For example I ask for my first user with a message :

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

Do you know how to solve this issue ? I read lot of stuff on stackoverflow and on vuex documentation but I don't find an answer.

Thank you in advance for your help.

Answer 1

You're modifying the array directly, without using any actual method to do so. Therefore Vue cannot pick up the change you've done. You need to either use push or some other Vue helpers like $set. Quoting some helper docs:

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).

Also, here's a list of all supported mutation methods (wrapped by Vue):

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