CompositionAPIで書かれたPiniaStoreの構文、VueDevtoolsではどのように表示されるのか検証してみた

先日DevtoolsでPiniaの欄を開いた際に疑問に思った。
「state,gettersが表示されているけど、CompositionAPIのsetupで書かれたStoreの構文、Devtoolsではどのように表示されるの？」

前提

CompositionAPIのsetupを用いてStoreを記述する際、以下のように記述する

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)　//stateと同じ
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)　//gettersと同じ
  function increment() {　　//actionsと同じ
    count.value++
  }

  return { count, name, doubleCount, increment }
})

Defining a Store | Pinia

検証結果

以下Storeに記述し、Devtoolsを開く

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

interface CounterState {
  count: number
}
export const useCounterStore = defineStore('counter', () => {
  const state = ref<CounterState>({
    count: 0
  })
  const doubleCount = computed(() => state.value.count * 2)

  function increment() {
    state.value.count++
  }

  return { state, doubleCount, increment }
})

stateとgettersに反映されている..！

新たな発見だったが、
・OptionsAPIでの構文前提知識がないと理解ができない
・constで定義した内容と相違がある為、どこがどの処理で出力されているのか慣れるまで見比べる必要がある

CompositionAPIのsetup用にアップデートされるのを切に願う
(関係ないけどPiniaのキャラクターかわいいな)