feat(devtools): allow resetting directly from devtools

vuejs · Nov 15, 2021 · 44fa896 · 44fa896
1 parent ce8f1e5
commit 44fa896
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/pinia/src/devtools/plugin.ts b/packages/pinia/src/devtools/plugin.ts
@@ -125,7 +125,20 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
               type: getStoreType(store.$id),
               key: 'state',
               editable: true,
-              value: store.$state,
+              value: store._isOptionsAPI
+                ? {
+                    _custom: {
+                      value: store.$state,
+                      actions: [
+                        {
+                          icon: 'restore',
+                          tooltip: 'Reset the state of this store',
+                          action: () => store.$reset(),
+                        },
+                      ],
+                    },
+                  }
+                : store.$state,
             })
 
             if (store._getters && store._getters.length) {
@@ -434,7 +447,9 @@ let runningActionId = 0
 let activeAction: number | undefined
 
 /**
- * Patches a store to enable action grouping in devtools by wrapping the store with a Proxy that is passed as the context of all actions, allowing us to set `runningAction` on each access and effectively associating any state mutation to the action.
+ * Patches a store to enable action grouping in devtools by wrapping the store with a Proxy that is passed as the
+ * context of all actions, allowing us to set `runningAction` on each access and effectively associating any state
+ * mutation to the action.
  *
  * @param store - store to patch
  * @param actionNames - list of actionst to patch
@@ -484,6 +499,11 @@ export function devtoolsPlugin<
     return
   }
 
+  // detect option api vs setup api
+  if (options.state) {
+    store._isOptionsAPI = true
+  }
+
   // only wrap actions in option-defined stores as this technique relies on
   // wrapping the context of the action with a proxy
   if (typeof options.state === 'function') {

diff --git a/packages/pinia/src/types.ts b/packages/pinia/src/types.ts
@@ -265,6 +265,13 @@ export interface StoreProperties<Id extends string> {
    */
   _getters?: string[]
 
+  /**
+   * Used (and added) by devtools plugin to detect Setup vs Options API usage.
+   *
+   * @internal
+   */
+  _isOptionsAPI?: boolean
+
   /**
    * Used by devtools plugin to retrieve properties added with plugins. Removed
    * in production. Can be used by the user to add property keys of the store