Изменения состояния ленивого коммита / буфера Vuex

Question

У меня проблема с конкретным вариантом использования где мое приложение может звонить store.commit 3 раза и более через секунду и те, которые заставляют приложение зависать или зависать в браузере. Так что я думал, могу ли я буферизовать изменения состояния перед тем, как вносить изменения и обновлять представление.

Первый вопрос, который мне не совсем понятен: vue обновляет свой взгляд при каждом изменении состояния или нет?

Например, у меня есть следующий код

state = {
  // Here i was using object instead of array of object
  // so I can get into my target object instead of
  // finding my target object first
  rooms: {
    1: { id: 1, name: 'Room 1' },
    2: { id: 2, name: 'Room 2' },
    3: { id: 3, name: 'Room 3' }
  }
}
mutations: {
  setRoom(state, payload) {
    const id = payload.id
    const oldData = state.rooms[id]
    const newData = Object.assign({}, oldData, payload.room)

    Vue.set(state.rooms, id, newData)
  }
}
actions: {
  updateRoom(store, { roomId, patch }) {
    store.commit('setRoom', { id: roomId, room: patch })
  }
}
// And later
store.dispatch('updateRoom', { roomId: 1, patch: { name: 'Room 11' } })
store.dispatch('updateRoom', { roomId: 2, patch: { name: 'Room 22' } })
store.dispatch('updateRoom', { roomId: 3, patch: { name: 'Room 33' } })

// Those store.dispatch come from a websocket and possible to have
// custom `patch` data

По второму вопросу, если вышеуказанный код обновлять 3 раза. Есть ли способ сохранить изменения или обновить вид только один раз?

Таким образом, вместо изменения состояния 3 раза первые изменения

{
  rooms: {
    1: { id: 1, name: 'Room 11' },
    2: { id: 2, name: 'Room 2' },
    3: { id: 3, name: 'Room 3' }
  }
}

секундные изменения

{
  rooms: {
    1: { id: 1, name: 'Room 11' },
    2: { id: 2, name: 'Room 22' },
    3: { id: 3, name: 'Room 3' }
  }
}

третьи изменения

{
  rooms: {
    1: { id: 1, name: 'Room 11' }
    2: { id: 2, name: 'Room 22' },
    3: { id: 3, name: 'Room 33' }
  }
}

Может ли это случиться только с одним изменением? Как

{
  rooms: {
    1: { id: 1, name: 'Room 11' }
    2: { id: 2, name: 'Room 22' },
    3: { id: 3, name: 'Room 33' }
  }
}

Answer 1

С https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue:

Каждый раз, когда наблюдается изменение данных, (Vue) открывает очередь и буферизирует все изменения данных, которые происходят в одном и том же цикле событий. Если один и тот же наблюдатель запускается несколько раз, он будет помещен в очередь только один раз. (...) Затем, в следующем цикле событий «tick», Vue сбрасывает очередь и выполняет фактическую (уже очищенную) работу.

Так что ... не беспокойся об этом, Вью уже об этом позаботится.

А почему вы не используете массив? Предполагая, что все идентификаторы комнат расположены в последовательном порядке, начиная с 1, вы можете мгновенно получить доступ к Room 1 в rooms[0], Room 2 в rooms[1] и т. Д., И доступ к массиву по индексу будет быстрее, чем доступ к объекту по ключу.

Answer 2

Одним из решений является помещение комнат в виде массива объектов, которые вы можете зафиксировать одновременно, если это возможно.

state = {
  rooms: [
     { id: 1, name: 'Room 1' },
     { id: 2, name: 'Room 2' },
     { id: 3, name: 'Room 3' }
  ]
}
mutations: {
  setRooms(state, payload) {
    state.rooms = payload
  }

Другое - чтобы ограничить то, как вызывается updateRoom, нужно знать, как это вызывается.