fix: populate payload state using it keys (#643)

packages/devtools/client/components/StateEditor.vue

@@ -1,32 +1,42 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
+import type { NuxtPayload } from '#app'
 
 const props = defineProps<{
   name?: string
   open?: boolean
-  state?: any
+  stateKey?: string
+  payloadKey?: keyof NuxtPayload
   readonly?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'update:open', value: boolean): void
 }>()
 
+const client = useClient()
 const isOpen = useVModel(props, 'open', emit, { passive: true })
 const colorMode = useColorMode()
 const proxy = ref()
+let clientState = ref<Record<string, any>>()
+
+if (props.payloadKey)
+  clientState = ref(client.value.nuxt.payload[props.payloadKey] as Record<string, any>)
 
 const state = useState(props.name)
-if (props.state)
-  proxy.value = JSON.parse(JSON.stringify(props.state))
-else if (typeof props.state === 'number' || typeof props.state !== 'string')
-  proxy.value = props.state
+if (props.stateKey) {
+  const stateValue = clientState.value?.[props.stateKey]
+  if (stateValue)
+    proxy.value = JSON.parse(JSON.stringify(stateValue))
+  else if (typeof stateValue === 'number' || typeof stateValue !== 'string')
+    proxy.value = stateValue
+}
 
 const watcher = watchPausable(
   proxy,
   (value) => {
-    if (typeof value !== 'number' && typeof value !== 'string')
-      deepSync(value, props.state)
+    if (typeof value !== 'number' && typeof value !== 'string' && props.stateKey)
+      deepSync(value, clientState.value?.[props.stateKey])
     else
       state.value = value
   },
@@ -47,10 +57,12 @@ function deepSync(from: any, to: any) {
 }
 
 async function refresh() {
-  watcher.pause()
-  proxy.value = JSON.parse(JSON.stringify(props.state))
-  await nextTick()
-  watcher.resume()
+  if (props.stateKey) {
+    watcher.pause()
+    proxy.value = JSON.parse(JSON.stringify(clientState.value?.[props.stateKey]))
+    await nextTick()
+    watcher.resume()
+  }
 }
 </script>
 

packages/devtools/client/components/StateGroup.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { NuxtPayload } from '#app'
+
 withDefaults(
   defineProps<{
     state?: Record<string, any>
+    payloadKey?: keyof NuxtPayload
     prefix?: string
   }>(),
   {
@@ -14,9 +17,10 @@ withDefaults(
   <div>
     <div v-if="state && Object.keys(state).length > 0" flex="~ col gap-1">
       <StateEditor
-        v-for="value, key of state"
+        v-for="key of Object.keys(state)"
         :key="key"
-        :state="value"
+        :state-key="key"
+        :payload-key="payloadKey"
         :name="key.startsWith(prefix) ? key.slice(prefix.length) : key"
       >
         <template #actions="props">

packages/devtools/client/pages/modules/payload.vue

@@ -27,7 +27,7 @@ async function refreshData(keys?: string[]) {
       :padding="false"
     >
       <StateGroup
-        :state="payload.state" prefix="$s"
+        :state="payload.state" payload-key="state" prefix="$s"
       />
     </NSectionBlock>
     <NSectionBlock
@@ -45,7 +45,7 @@ async function refreshData(keys?: string[]) {
           Re-fetch all data
         </NButton>
       </template>
-      <StateGroup :state="payload.data">
+      <StateGroup :state="payload.data" payload-key="data">
         <template #actions="{ isOpen, name }">
           <NButton
             v-if="isOpen && name"
@@ -66,7 +66,7 @@ async function refreshData(keys?: string[]) {
     >
       <StateEditor
         ml--6
-        :state="payload.functions"
+        :state="payload.functions" payload-key="functions"
       />
     </NSectionBlock>
   </div>