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) 都会打开一个队列并缓冲在同一个事件循环中发生的所有数据变化。如果同一个 watcher 被多次触发，它只会被推入队列一次。 (...) 然后，在下一个事件循环“tick”中，Vue 刷新队列并执行实际的（已经去重复的）工作。

所以...别担心，Vue 已经在处理它了。

为什么不使用数组呢？假设所有房间ID都是从1开始的连续顺序，你可以立即访问rooms[0]中的Room 1，rooms[1]中的Room 2等等，并且通过索引访问数组将比访问对象更快按键。

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 被调用的方式，需要知道它是如何被调用的。