perf(vuex): batch mutation insert

Guillaume Chau · Guillaume Chau · commit 28efcaf4957b · 2019-10-29T16:58:41.000+01:00
diff --git a/packages/app-frontend/src/index.js b/packages/app-frontend/src/index.js
@@ -151,7 +151,7 @@ function initApp (shell) {
       })
 
       bridge.on('vuex:mutation', payload => {
-        store.commit('vuex/RECEIVE_MUTATION', payload)
+        store.dispatch('vuex/receiveMutation', payload)
       })
 
       bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
@@ -161,6 +161,8 @@ function initApp (shell) {
           store.commit('vuex/UPDATE_BASE_STATE', snapshot)
         } else if (store.getters['vuex/absoluteInspectedIndex'] === index) {
           store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
+        } else {
+          console.log('vuex:inspected-state wrong index', index, 'expected:', store.getters['vuex/absoluteInspectedIndex'])
         }
 
         if (VuexResolve.travel) {
diff --git a/packages/app-frontend/src/views/vuex/actions.js b/packages/app-frontend/src/views/vuex/actions.js
@@ -1,6 +1,21 @@
 import { snapshotsCache } from './cache'
 import Resolve from './resolve'
 import SharedData from '@utils/shared-data'
+import debounce from 'lodash/debounce'
+
+const mutationBuffer = []
+
+export function receiveMutation ({ commit }, entry) {
+  mutationBuffer.push(entry)
+  receiveMutations(commit)
+}
+
+export const receiveMutations = debounce(commit => {
+  commit('RECEIVE_MUTATIONS', mutationBuffer)
+  mutationBuffer.length = 0
+}, 300, {
+  maxWait: 1000
+})
 
 export function commitAll ({ commit, state }) {
   if (state.history.length > 0) {
diff --git a/packages/app-frontend/src/views/vuex/module.js b/packages/app-frontend/src/views/vuex/module.js
@@ -31,10 +31,12 @@ const mutations = {
     reset(state)
   },
 
-  'RECEIVE_MUTATION' (state, entry) {
+  'RECEIVE_MUTATIONS' (state, entries) {
     const inspectingLastMutation = state.inspectedIndex === state.history.length - 1
-    entry.id = uid++
-    state.history.push(entry)
+    for (const entry of entries) {
+      entry.id = uid++
+    }
+    state.history.push(...entries)
     if (!state.filter) {
       state.activeIndex = state.history.length - 1
       if (inspectingLastMutation) {
@@ -131,7 +133,7 @@ const getters = {
     return filteredHistory[inspectedIndex]
   },
 
-  inspectedState ({ base, inspectedIndex, inspectedState, inspectedModule }, { inspectedEntry }) {
+  inspectedState ({ base, inspectedState, inspectedModule }, { inspectedEntry }) {
     const data = inspectedEntry ? inspectedState : base
     return processInspectedState({ entry: inspectedEntry, data, inspectedModule })
   },
