fix(devtools): update when custom properties change

diff --git a/playground/src/main.ts b/playground/src/main.ts
index 70a366656015da7471c541caffe0cbde2c55968c..3de1a062a7b09c8fa2ac99d1089cffa31a755558 100644 (file)
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,10 +1,14 @@
-import { createApp } from 'vue'
+import { computed, createApp, markRaw } from 'vue'
 import App from './App.vue'
 import { createPinia } from '../../src'
 import { router } from './router'
 
 const pinia = createPinia()
 
+pinia.use(() => ({
+  route: computed(() => markRaw(router.currentRoute.value)),
+}))
+
 if (import.meta.hot) {
   //   const isUseStore = (fn: any): fn is StoreDefinition => {
   //     return typeof fn === 'function' && typeof fn.$id === 'string'

diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
index 1c0ba34a4b4a31fc64465f7f84389bc6a676bc29..c02c7926a913269aa186a14792ee532ed599a845 100644 (file)
--- a/src/devtools/plugin.ts
+++ b/src/devtools/plugin.ts
@@ -1,5 +1,14 @@
 import { setupDevtoolsPlugin, TimelineEvent } from '@vue/devtools-api'
-import { App, ComponentPublicInstance, markRaw, toRaw } from 'vue'
+import {
+  App,
+  ComponentPublicInstance,
+  isReactive,
+  isRef,
+  markRaw,
+  toRaw,
+  unref,
+  watch,
+} from 'vue'
 import { Pinia, PiniaPluginContext } from '../rootStore'
 import {
   GettersTree,
@@ -312,13 +321,39 @@ function addStoreToDevtools(app: App, store: StoreGeneric) {
         })
       }, true)
 
-      store.$subscribe(({ events, type }, state) => {
-        if (!isTimelineActive) return
-        // rootStore.state[store.id] = state
+      store._customProperties.forEach((name) => {
+        watch(
+          () => unref(store[name]),
+          (newValue, oldValue) => {
+            api.notifyComponentUpdate()
+            api.sendInspectorState(INSPECTOR_ID)
+            if (isTimelineActive) {
+              api.addTimelineEvent({
+                layerId: MUTATIONS_LAYER_ID,
+                event: {
+                  time: Date.now(),
+                  title: 'Change',
+                  subtitle: name,
+                  data: {
+                    newValue,
+                    oldValue,
+                  },
+                  groupId: activeAction,
+                },
+              })
+            }
+          },
+          { deep: true }
+        )
+      })
 
+      store.$subscribe(({ events, type }, state) => {
         api.notifyComponentUpdate()
         api.sendInspectorState(INSPECTOR_ID)
 
+        if (!isTimelineActive) return
+        // rootStore.state[store.id] = state
+
         const eventData: TimelineEvent = {
           time: Date.now(),
           title: formatMutationType(type),