Conflict with latest version of Vue DevTools (5.x) #14
Description
There is a conflict with the recent versions of Vue DevTools (5.x+) which is described in issue #914
More specifically, this is related to some additional code inside the hook.once("vuex:init" callback which is missing in Vue-Perf-DevTool. The problem manifests itself by Vue DevTools not being able to detect the presence of Vuex store.
The workaround is to disable the Vue-Perf-DevTool extension - but the current implementation of the Performance tab in the recent Vue DevTools is not so informative. So the solution is to add the missing code and update the hook in Vue-Perf-DevTool to reflect the hook in Vue DevTools:
/src/backend/hook.js:
hook.once('vuex:init', store => {
hook.store = store
// === the following code must be added ===
hook.initialStore = {
state: clone(store.state),
getters: store.getters
}
// Dynamic modules
if (store.registerModule) {
hook.storeModules = []
const origRegister = store.registerModule.bind(store)
store.registerModule = (path, module, options) => {
if (typeof path === 'string') path = [path]
hook.storeModules.push({ path, module, options })
origRegister(path, module, options)
}
const origUnregister = store.unregisterModule.bind(store)
store.unregisterModule = (path) => {
if (typeof path === 'string') path = [path]
const key = path.join('/')
const index = hook.storeModules.findIndex(m => m.path.join('/') === key)
if (index !== -1) hook.storeModules.splice(0, 1)
origUnregister(path)
}
hook.flushStoreModules = () => {
store.registerModule = origRegister
store.unregisterModule = origUnregister
return hook.storeModules
}
} else {
hook.flushStoreModules = () => []
}
})