feat(devtools): add getters to devtools

Author: posva

src/devtools.ts

@@ -4,7 +4,7 @@ import {
   setupDevtoolsPlugin,
 } from '@vue/devtools-api'
 import { App } from 'vue'
-import { GenericStore } from './types'
+import { GenericStore, GettersTree, StateTree } from './types'
 
 function formatDisplay(display: string) {
   return {
@@ -167,6 +167,14 @@ function formatStoreForInspectorState(
   const fields: CustomInspectorState[string] = [
     { editable: false, key: 'id', value: formatDisplay(store.$id) },
     { editable: true, key: 'state', value: store.$state },
+    {
+      editable: false,
+      key: 'getters',
+      value: (store._getters || []).reduce((getters, key) => {
+        getters[key] = store[key]
+        return getters
+      }, {} as GettersTree<StateTree>),
+    },
   ]
 
   return fields

src/store.ts

@@ -267,6 +267,10 @@ function buildStoreToUse<
   // created.
   Object.defineProperty(store, '$state', descriptor)
 
+  if (IS_CLIENT && __BROWSER__ && __DEV__) {
+    store._getters = Object.keys(getters)
+  }
+
   // apply all plugins
   pinia._p.forEach((extender) => {
     assign(store, extender({ store, app: pinia._a, pinia, options }))

src/types.ts

@@ -64,6 +64,13 @@ export interface StoreWithState<Id extends string, S extends StateTree> {
    */
   _p: Pinia
 
+  /**
+   * Used by devtools plugin to retrieve getters. Removed in production
+   *
+   * @internal
+   */
+  _getters?: string[]
+
   /**
    * Applies a state patch to current state. Allows passing nested values
    *