feat(vuex): vuex auto load, closes #909

vuejs · Mar 25, 2019 · 36be21a · 36be21a
1 parent fe37701
commit 36be21a
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/vuejs/vue-devtools#readme",
   "dependencies": {
-    "@vue/ui": "^0.5.6",
+    "@vue/ui": "^0.7.2",
     "circular-json-es6": "^2.0.2",
     "d3": "^5.9.2",
     "lodash.debounce": "^4.0.8",
@@ -86,4 +86,4 @@
   "engines": {
     "node": ">=8.10"
   }
-}
+}
diff --git a/src/devtools/views/settings/GlobalPreferences.vue b/src/devtools/views/settings/GlobalPreferences.vue
@@ -2,9 +2,8 @@
   <div class="global-preferences preferences">
     <VueFormField title="Normalize component names">
       <VueGroup
-        :value="$shared.classifyComponents"
+        v-model="$shared.classifyComponents"
         class="extend"
-        @input="$shared.classifyComponents = $event"
       >
         <VueGroupButton
           :value="false"
@@ -19,9 +18,8 @@
 
     <VueFormField title="Theme">
       <VueGroup
-        :value="$shared.theme"
+        v-model="$shared.theme"
         class="extend"
-        @input="$shared.theme = $event"
       >
         <VueGroupButton
           value="auto"
@@ -40,9 +38,8 @@
 
     <VueFormField title="Display density">
       <VueGroup
-        :value="$shared.displayDensity"
+        v-model="$shared.displayDensity"
         class="extend"
-        @input="$shared.displayDensity = $event"
       >
         <VueGroupButton
           value="auto"
@@ -59,27 +56,40 @@
       </VueGroup>
     </VueFormField>
 
-    <VueFormField title="Editable props">
-      <VueSwitch
-        :value="$shared.editableProps"
-        @input="$shared.editableProps = $event"
-      >
-        Enable <span class="dim">(may print warnings)</span>
+    <VueFormField
+      title="Editable props"
+    >
+      <VueSwitch v-model="$shared.editableProps">
+        Enable
       </VueSwitch>
+      <template #subtitle>
+        <VueIcon
+          icon="warning"
+          class="medium"
+        />
+        This may print warnings in the console
+      </template>
     </VueFormField>
 
     <VueFormField title="Detected Vue message">
-      <VueSwitch
-        :value="$shared.logDetected"
-        @input="$shared.logDetected = $event"
-      >
+      <VueSwitch v-model="$shared.logDetected">
         Display in browser console
       </VueSwitch>
     </VueFormField>
+
+    <VueFormField
+      title="Autoload Vuex state"
+    >
+      <VueSwitch v-model="$shared.vuexAutoload">
+        Enable
+      </VueSwitch>
+      <template #subtitle>
+        <VueIcon
+          icon="warning"
+          class="medium"
+        />
+        May impact performance or cause crashes
+      </template>
+    </VueFormField>
   </div>
 </template>
-
-<style lang="stylus" scoped>
-.dim
-  color $darkerGrey
-</style>
diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/src/devtools/views/vuex/VuexStateInspector.vue
@@ -197,6 +197,17 @@ export default {
     }
   },
 
+  mounted () {
+    bridge.on('vuex:mutation', this.onMutation)
+    if (this.isOnlyMutationPayload && this.$shared.vuexAutoload) {
+      this.loadState()
+    }
+  },
+
+  destroyed () {
+    bridge.off('vuex:mutation', this.onMutation)
+  },
+
   methods: {
     ...mapActions('vuex', [
       'inspect'
@@ -241,7 +252,13 @@ export default {
     loadState () {
       const history = this.filteredHistory
       this.inspect(history[history.length - 1])
-    }
+    },
+
+    onMutation: debounce(function () {
+      if (this.$shared.vuexAutoload) {
+        this.loadState()
+      }
+    }, 800)
   }
 }
 

diff --git a/src/shared-data.js b/src/shared-data.js
@@ -12,7 +12,8 @@ const internalSharedData = {
   snapshotLoading: false,
   recordPerf: false,
   editableProps: false,
-  logDetected: true
+  logDetected: true,
+  vuexAutoload: false
 }
 
 const persisted = [
@@ -21,7 +22,8 @@ const persisted = [
   'displayDensity',
   'recordVuex',
   'editableProps',
-  'logDetected'
+  'logDetected',
+  'vuexAutoload'
 ]
 
 // ---- INTERNALS ---- //

diff --git a/yarn.lock b/yarn.lock
@@ -51,15 +51,14 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/ui@^0.5.6":
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.5.6.tgz#7c39b04a3b08ae3f217d2323987ae13347a90b29"
-  integrity sha512-NmxJsFk8umipCbKLusz6L27DQIicpt8jLOjN1aLjyBIeX3t4H5RFshxH7IUtjDPtgOYGwwq7gy86bmFkDDBsIQ==
+"@vue/ui@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.7.2.tgz#c4501719267dd35e048a5be68aeea17f67ba47cd"
+  integrity sha512-LDhPgumKVeVSFpfLlrKOpbWPJB8pAacsBGEYLifOSNpEQhSZDTA7cMAfZ35GkXnrfUh3tovne0X+KyBewz3pOg==
   dependencies:
-    focus-visible "^4.1.4"
-    material-design-icons "^3.0.1"
+    focus-visible "^4.1.5"
     v-tooltip "^2.0.0-rc.33"
-    vue-resize "^0.4.4"
+    vue-resize "^0.4.5"
 
 "@webassemblyjs/[email protected]":
   version "1.8.5"
@@ -2445,7 +2444,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-focus-visible@^4.1.4:
+focus-visible@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-4.1.5.tgz#50b44e2e84c24b831ceca3cce84d57c2b311c855"
   integrity sha512-yo/njtk/BB4Z2euzaZe3CZrg4u5s5uEi7ZwbHBJS2quHx51N0mmcx9nTIiImUGlgy+vf26d0CcQluahBBBL/Fw==
@@ -3681,11 +3680,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-material-design-icons@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/material-design-icons/-/material-design-icons-3.0.1.tgz#9a71c48747218ebca51e51a66da682038cdcb7bf"
-  integrity sha1-mnHEh0chjrylHlGmbaaCA4zct78=
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6107,7 +6101,7 @@ vue-observe-visibility@^0.4.3:
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.3.tgz#b2694a83c94b274f566e03a497df51540e2daedc"
   integrity sha512-YyyO3a5OUkgpmC0NEf+xWJR0jVdFWzVbKRDzUumOVMhfr3+jxXEycYNHCM3rEO5lcj3ZNJpDomZEYEx0Wqqh9A==
 
-vue-resize@^0.4.3, vue-resize@^0.4.4, vue-resize@^0.4.5:
+vue-resize@^0.4.3, vue-resize@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
   integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==