feat(devtools): add getters to devtools

diff --git a/src/devtools.ts b/src/devtools.ts
index 2e4dc60399f451ef84634ed23bf9ccde8094d7f6..68da5c5af366881792ca91d06694f77f21d33f65 100644 (file)
--- a/src/devtools.ts
+++ b/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

diff --git a/src/store.ts b/src/store.ts
index 196f03c4915d14fc2898981d8e63115b68b3c1cc..73060a8af8e989b3f6c2adab4f5c3163c58d5537 100644 (file)
--- a/src/store.ts
+++ b/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 }))

diff --git a/src/types.ts b/src/types.ts
index 6163b00eb7f29648d1ac8c87695c450917903694..e88180363eee150de198a0988755292d9d88bb0a 100644 (file)
--- a/src/types.ts
+++ b/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
    *