Состояние массива Vuex не определено - PullRequest
Новая
       21

Состояние массива Vuex не определено

0 голосов
/ 05 октября 2018

У меня есть магазин на 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

Но если я спрашиваюконкретный идентификатор я получаю неопределенным в моем журнале консоли.Например, я спрашиваю моего первого пользователя с сообщением: 

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

Знаете ли вы, как решить эту проблему?Я много чего прочитал о stackoverflow и документации vuex, но не нашел ответа.

Заранее благодарю за помощь.

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Спасибо всем, после некоторых исследований я хочу завершить ответ Андрея Попова.Действительно, если мы используем Vuex, нам нужно использовать напрямую: 

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

Метод this. $ Set недоступен в Vuex.Теперь он работает с этим методом.

0 голосов
/ 05 октября 2018

Вы модифицируете массив напрямую, без использования какого-либо фактического метода для этого.Поэтому Vue не может получить изменения, которые вы сделали.Вам нужно использовать push или некоторых других помощников Vue, таких как $set.Цитирование некоторого помощника docs :

Когда вы модифицируете массив, напрямую устанавливая индекс (например, arr [0] = val) или изменяя его свойство length.Точно так же Vue.js не может получить эти изменения.Всегда изменяйте массивы с помощью метода экземпляра Array или полностью его заменяя.Vue предоставляет удобный метод arr. $ Set (index, value), который является синтаксическим сахаром для arr.splice (index, 1, value).

Кроме того, вот список всех поддерживаемых методов мутации (обернуто Vue): 

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