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

一种解决方案是，如果可行的话，将房间作为对象的数组，您可以一次提交。

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

Answer 2

来自https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue：

每当观察到数据更改时，（Vue）都会打开队列并缓冲在同一事件循环中发生的所有数据更改。如果多次触发同一观察者，则它将仅被推入队列一次。（...）然后，在下一个事件循环“ tick”中，Vue刷新队列并执行实际的（已删除重复数据）工作。

所以...不用担心，Vue已经在照顾它。

为什么不使用数组？假设所有房间ID的顺序都是从1开始的，那么您可以立即访问Room 1中的rooms[0]，Room 2中的rooms[1]等等，并通过以下方式访问数组索引比通过键访问对象要快。

Vuex惰性提交/缓冲区状态更改

2 个答案: