display vuex bindings

Author: yyx990803

src/backend/index.js

@@ -431,23 +431,28 @@ function processState (instance) {
 
 function processComputed (instance) {
   const computed = []
+  const defs = instance.$options.computed || {}
   // use for...in here because if 'computed' is not defined
   // on component, computed properties will be placed in prototype
   // and Object.keys does not include
   // properties from object's prototype
-  for (const key in (instance.$options.computed || {})) {
+  for (const key in defs) {
+    const def = defs[key]
+    const type = typeof def === 'function' && def.vuex
+      ? 'vuex'
+      : 'computed'
     // use try ... catch here because some computed properties may
     // throw error during its evaluation
     let computedProp = null
     try {
       computedProp = {
-        type: 'computed',
+        type,
         key,
         value: instance[key]
       }
     } catch (e) {
       computedProp = {
-        type: 'computed',
+        type,
         key,
         value: '(error during evaluation)'
       }

src/devtools/components/StateInspector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="data-wrapper">
     <div v-for="type in Object.keys(state)" :class="['data-el', toDisplayType(type)]">
-      <div class="data-type">{{ toDisplayType(type) }}</div>
+      <div class="data-type">{{ toDisplayType(type, true) }}</div>
       <div class="data-fields">
         <template v-if="Array.isArray(state[type])">
           <data-field
@@ -33,8 +33,14 @@ export default {
     DataField
   },
   methods: {
-    toDisplayType (type) {
-      return type === 'undefined' ? 'data' : type
+    toDisplayType (type, full) {
+      return type === 'undefined'
+        ? 'data'
+        : full
+          ? (type === 'vuex' || type === 'firebase')
+            ? type + ' bindings'
+            : type
+          : type
     }
   }
 }