tweak state inspector labels text and order

Author: yyx990803

src/backend/index.js

@@ -351,7 +351,7 @@ function processProps (instance) {
       const prop = props[key]
       const options = prop.options
       return {
-        type: 'prop',
+        type: 'props',
         key: prop.path,
         value: instance[prop.path],
         meta: {
@@ -367,7 +367,7 @@ function processProps (instance) {
       const prop = props[key]
       key = camelize(key)
       return {
-        type: 'prop',
+        type: 'props',
         key,
         value: instance[key],
         meta: {
@@ -439,7 +439,7 @@ function processComputed (instance) {
   for (const key in defs) {
     const def = defs[key]
     const type = typeof def === 'function' && def.vuex
-      ? 'vuex'
+      ? 'vuex bindings'
       : 'computed'
     // use try ... catch here because some computed properties may
     // throw error during its evaluation
@@ -503,7 +503,7 @@ function processVuexGetters (instance) {
   if (getters) {
     return Object.keys(getters).map(key => {
       return {
-        type: 'vuex getter',
+        type: 'vuex getters',
         key,
         value: instance[key]
       }
@@ -525,7 +525,7 @@ function processFirebaseBindings (instance) {
   if (refs) {
     return Object.keys(refs).map(key => {
       return {
-        type: 'firebase',
+        type: 'firebase bindings',
         key,
         value: instance[key]
       }
@@ -547,7 +547,7 @@ function processObservables (instance) {
   if (obs) {
     return Object.keys(obs).map(key => {
       return {
-        type: 'observable',
+        type: 'observables',
         key,
         value: instance[key]
       }

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, true) }}</div>
+    <div v-for="type in getKeys(state)" :class="['data-el', toDisplayType(type)]">
+      <div class="data-type">{{ toDisplayType(type) }}</div>
       <div class="data-fields">
         <template v-if="Array.isArray(state[type])">
           <data-field
@@ -27,20 +27,32 @@
 <script>
 import DataField from './DataField.vue'
 
+const keyOrder = {
+  undefined: 1,
+  props: 2,
+  computed: 3,
+  state: 1,
+  getters: 2
+}
+
 export default {
   props: ['state'],
   components: {
     DataField
   },
   methods: {
-    toDisplayType (type, full) {
+    getKeys (state) {
+      return Object.keys(state).sort((a, b) => {
+        return (
+          (keyOrder[a] || (a.charCodeAt(0) + 999)) -
+          (keyOrder[b] || (b.charCodeAt(0) + 999))
+        )
+      })
+    },
+    toDisplayType (type) {
       return type === 'undefined'
         ? 'data'
-        : full
-          ? (type === 'vuex' || type === 'firebase')
-            ? type + ' bindings'
-            : type
-          : type
+        : type
     }
   }
 }