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)
Please or to participate in this conversation.