Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

dcranmer's avatar

Why is Vue DevTools displaying Pinia getters like this?

The behavior described below is with Vue 2.7, Pinia 2.0.25, and vite.

To cut to the chase, if I look under "computed" in Vue DevTools for store getters mapped with mapState, the getters, which should generate arrays, are displayed as shown below. I have no idea where this comes from, or why it is displaying this way. I've never seen it before. Moreover, the in the Pinia tab of DevTools, every element in the store state is empty.

What's new in this (Laravel 9) app is that I am using vite instead of Laravel Mix, and vue 2.7 instead of vue 2.6.

countiesCount:Object
effect:Object
value:72
areasCount:Object
effect:Object
value:10
citiesSet:Object
effect:Object
value:Array[649]
countiesSet:Object
effect:Object
value:Array[72]
areasFieldSet:Object

And if opened:

areasFieldSet:Object
effect:Object
active:true
before:undefined
cb:function noop(a, b, c)
deep:false
depIds:Set[0]
deps:Array[0]
dirty:false
expression:"() => {\n        setActivePinia(pinia);\n        const store2 = pinia._s.get(id);\n        if (isVue2 && !store2._r)\n          return;\n        return getters[name].call(store2, store2);\n      }"
getter:function ()
id:72
lazy:true
newDepIds:Set[0]
newDeps:Array[0]
onTrack:undefined
onTrigger:undefined
post:false
sync:false
user:false
value:undefined
vm:Root
value:array

If I run these getters manually in the console, they return arrays (as they should). Example:

const areasFieldset = $vm0.areasList.map(id => $vm0.areas[id])

areasFieldset
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
: 
{id: 1, area_name: 'Agriculture'}
1
: 
{id: 2, area_name: 'Arts and Culture'}
2
: 
{id: 3, area_name: 'Economic Development'}
3
: 
{id: 4, area_name: 'Education'}
4
: 
{id: 5, area_name: 'Environment'}
5
: 
{id: 6, area_name: 'Health Care'}
6
: 
{id: 7, area_name: 'Outreach Activities'}
7
: 
{id: 8, area_name: 'Quality of Life'}
8
: 
{id: 11, area_name: 'Research'}
9
: 
{id: 10, area_name: 'Other'}
length
: 
10
[[Prototype]]
: 
Array(0)
0 likes
0 replies

Please or to participate in this conversation.