Is this a Pinia bug?

[jdheeter]

I'm trying to render a reactive object in my pinia store to the DOM. It seems like the data has lost reactivity because when I navigate away from the tab and back (redraw the component) then the data becoms available. When I reload the data via fetch then the data in the DOM becomes an empty array again.

After navigating away and back

Clicking load again:

As you can see in the devtools, the array has 5 objects in it, so why is an empty array being rendered?

Here is the vue component:

atomic.getAccountAssets() simply loads data into that array under the 'upliftevents' key

[feelixe]

[jdheeter]

Is that true? If the object is reactive then I thought that adding keys dynamically is fine? The keys are based on dynamic info from the user activity.

[feelixe]

I'm not sure, but you could try setting that field to some default value in store just to test if it's an issue with reactivity, because it sounds like it is.

[jdheeter]

I spent some more time debugging this issue and I found that the issue exists even when the data properties are placed inside a normal vue component data properties. I tried a JSON.stringify on the data array and I get an empty array so that tells me something is wrong with my objects, oddly enough, using vue dev tools, all the data properties show up as you would expect they just don't render properly in the DOM (unless you navigate/force a redraw). Still trying to isolate what's wrong with my simple json objects.

[jdheeter]

Ok so the solution I found is to wrap the empty array with reactive(), this is needed as the initial value in the pinia store and also needed if you are overwriting it with a new value. My understanding was that reactive() was only needed when defining reactive elements in the composition api (outside of pinia state). None of the Pinia examples or documentation references the need to add reactive() around pinia data properties so this is pretty confusing for me. Also nothing in the dev tools looks any different so it's not easy to debug this reactivity issue.

[jibrilmohamod]

im using the setup store and yet this is still happening although ive wrapped everything in a ref()

[theoephraim]

@jibrilmohamod - an array in a ref will only be reactive if you replace the entire array. Try wrapping the array in reactive instead, as this will be aware of things like adding/removing items.

[jdheeter]

Is there some clear documentation on these rules?

[theoephraim]

@jdheeter - when pulling data from the store, you must wrap it in a computed. This is what triggers the component re-render.

For example const assetsToShow = computed(() => myStore.assets)

You don't quite show that bit in your code, but I suspect that is the issue.

[jdheeter]

You can't directly access state data? In the pinia docs this is not covered. Also relying on computed from what I understand will increase CPU and RAM usage because of duplication of data so I try not to use computed unless necessary.

[theoephraim]

check out this section of the docs. It does kind of cover it, but I agree it could be a bit more clear...

It shows 2 ways of extracting data from the store and keeping it reactive.

• const doubleCount = computed(() => store.doubleCount) (shown in setup fn rather than script setup syntax)
• const { doubleCount } = storeToRefs(store)

I'm having a hard time putting into words exactly why this is needed but without it the component doesn't quite know about the reactivity and so it never triggers the re-render even though the underlying data is there.

[theoephraim]

hmm I'm rereading the docs and digging in. it seems I may be just maintaining old habits from using vuex and it looks like you should be able to use the store directly... Or rather I probably ran into similar situations and wrapping in computed solved it for me.

I suspect it is just some issue with reactivity and the rest of how you have it set up though. Maybe post a bit more code?

[jdheeter]

I'm not working on this codebase anymore but the solution that worked for me was wrapping everything in reactive. It's just strange and confusing that was needed because the docs never show an example like that. Here is the most advanced example in the docs I could find:
https://pinia.vuejs.org/introduction.html#a-more-realistic-example

It would be great to see a more real-world example working with complex objects and data types.

[jdheeter]

Maybe a maintainer could point us to some good references? @posva