feat(devtools): expose selected store as global variable (#2692)

* feat: expose selected store as

* fix: Expose  and  to window

* refactor: add to globalThis

---------

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

diff --git a/packages/pinia/src/devtools/plugin.ts b/packages/pinia/src/devtools/plugin.ts
index e122a04d1b7f49e4fbd905ea44959cf1b2e9ab07..2c9fdd5c707418c0b0ad9f57a923d3be86060900 100644 (file)
--- a/packages/pinia/src/devtools/plugin.ts
+++ b/packages/pinia/src/devtools/plugin.ts
@@ -216,6 +216,9 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
         }
       })
 
+      // Expose pinia instance as $pinia to window
+      globalThis.$pinia = pinia
+
       api.on.getInspectorState((payload) => {
         if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
           const inspectedStore =
@@ -230,6 +233,9 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
           }
 
           if (inspectedStore) {
+            // Expose selected store as $store to window
+            if (payload.nodeId !== PINIA_ROOT_ID)
+              globalThis.$store = toRaw(inspectedStore as StoreGeneric)
             payload.state = formatStoreForInspectorState(inspectedStore)
           }
         }
@@ -592,3 +598,14 @@ export function devtoolsPlugin<
     store as StoreGeneric
   )
 }
+
+declare global {
+  /**
+   * Exposes the `pinia` instance when Devtools are opened.
+   */
+  var $pinia: Pinia | undefined
+  /**
+   * Exposes the current store when Devtools are opened.
+   */
+  var $store: StoreGeneric | undefined
+}