From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 28 Jul 2021 20:35:01 +0000 (+0200)
Subject: fix(devtools): update when custom properties change
X-Git-Tag: v2.0.0-rc.1~6
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7dcb71e8182900c451a56f1ad9e0e931dba48dcb;p=thirdparty%2Fvuejs%2Fpinia.git

fix(devtools): update when custom properties change
---

diff --git a/playground/src/main.ts b/playground/src/main.ts
index 70a36665..3de1a062 100644
--- 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 1c0ba34a..c02c7926 100644
--- 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),