Vuex 유휴 커밋/버퍼 상태 변경

Vuex 유휴 커밋/버퍼 상태 변경

응용 프로그램에서 호출할 수 있는 특정 사용 사례에 문제가 있습니다.store.commit1초에 3회 이상 애플리케이션을 지연시키거나 브라우저를 정지시키는 경우.그래서 저는 실제로 변경사항과 업데이트 보기를 커밋하기 전에 상태 변경사항을 버퍼링할 수 있다고 생각했습니다.

첫 번째 질문으로, vue update는 모든 상태가 변경될 때마다 뷰를 업데이트합니까?

예를 들어 나는 다음과 같은 코드를 가지고 있습니다.

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' }
  }
}

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

데이터 변경이 관찰될 때마다 (Vue)는 대기열을 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경을 버퍼링합니다.동일한 감시기가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. (...) 그런 다음 다음 이벤트 루프 "틱"에서 Vue는 대기열을 플러시하고 실제(이미 중복 제거된) 작업을 수행합니다.

그러니까... 걱정하지 마세요. 부에가 이미 처리하고 있어요.

그리고 왜 배열을 사용하지 않습니까?모든 룸 ID가 1로 시작하는 순차적인 순서에 있다고 가정하면, 즉시 접근할 수 있습니다.Room 1에rooms[0],Room 2에rooms[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이 호출되는 방법을 제한하는 것입니다. 이 방법을 알아야 합니다.

언급URL : https://stackoverflow.com/questions/53210030/vuex-lazy-commit-buffer-state-changes