Nuxt•4d ago

Responsive component property racing pinia store

I'm absolutely banging my head on this. I have the following.

  const { inLibrary, inWishlist, inBlacklist, inTradelist } = useCollectionsStore(); // pinia store actions
  const getRowClass = item => {
    return {
      'app-row': true,
      'in-library': inLibrary(item.appid),
      'in-wishlist': inWishlist(item.appid),
      'in-blacklist': inBlacklist(item.appid),
      'in-tradelist': inTradelist(item.appid)
    };
  };



/*
<v-data-table
    :items="items"
    :row-props="(item) => ({ class: getRowClass(item) })"
/>
*/

  const { inLibrary, inWishlist, inBlacklist, inTradelist } = useCollectionsStore(); // pinia store actions
  const getRowClass = item => {
    return {
      'app-row': true,
      'in-library': inLibrary(item.appid),
      'in-wishlist': inWishlist(item.appid),
      'in-blacklist': inBlacklist(item.appid),
      'in-tradelist': inTradelist(item.appid)
    };
  };



/*
<v-data-table
    :items="items"
    :row-props="(item) => ({ class: getRowClass(item) })"
/>
*/

I can't get row props to work properly. It adds the app-row class to each row, but nothing else. I've tested the getRowClass function separately and it works fine. I suspect a race condition: getRowClass is called before pinia is initialized. And since its not responsive, it won't be corrected later. Is there perhaps any way to make this responsive? I've tried many ways but failed... the main issue is it needs the context of item to work.

25 Replies

kapa.ai•4d ago

Hi @Revadike. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't have specific information about the exact issue you're facing with responsive component properties and Pinia store interactions in Nuxt. However, I can provide some general guidance based on Pinia usage in Nuxt: 1. Ensure Pinia store initialization: Make sure your Pinia store is properly initialized before accessing it in your component. In Nuxt 3, you typically need to import and use the store in a component's setup function or script setup block. 2. Use storeToRefs for reactivity: When accessing store state in components, it's recommended to use storeToRefs to maintain reactivity. You can import it from Pinia:

<script setup>
import { storeToRefs } from 'pinia'
import { useCollectionsStore } from '~/stores/collections'

const collectionsStore = useCollectionsStore()
const { inLibrary, inWishlist, inBlacklist, inTradelist } = storeToRefs(collectionsStore)
</script>

<script setup>
import { storeToRefs } from 'pinia'
import { useCollectionsStore } from '~/stores/collections'

const collectionsStore = useCollectionsStore()
const { inLibrary, inWishlist, inBlacklist, inTradelist } = storeToRefs(collectionsStore)
</script>

3. Computed property for row class: Consider using a computed property for the row class to ensure reactivity:

<script setup>
import { computed } from 'vue'

const getRowClass = computed(() => (item) => {
  return {
    'app-row': true,
    'in-library': inLibrary.value(item.appid),
    'in-wishlist': inWishlist.value(item.appid),
    'in-blacklist': inBlacklist.value(item.appid),
    'in-tradelist': inTradelist.value(item.appid)
  }
})
</script>

<script setup>
import { computed } from 'vue'

const getRowClass = computed(() => (item) => {
  return {
    'app-row': true,
    'in-library': inLibrary.value(item.appid),
    'in-wishlist': inWishlist.value(item.appid),
    'in-blacklist': inBlacklist.value(item.appid),
    'in-tradelist': inTradelist.value(item.appid)
  }
})
</script>

4. Ensure store actions are properly defined: Make sure your store actions (inLibrary, inWishlist, etc.) are correctly defined and return reactive values. If these suggestions don't resolve your issue, it might be helpful to create a minimal reproducible example and seek further assistance on platforms like Stack Overflow or the Nuxt community forums. Stack Overflow: Pinia store does not initialise provides some additional context on Pinia initialization in Nuxt 3, which might be relevant to your situation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@172781195329798144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RevadikeOP•4d ago

I tried this already, but no

manniL•4d ago

@Revadike do you have a simple repro?

RevadikeOP•4d ago

I do not, sorry Is something like this possible?

    :row-props="(item) => ({ [':class']: getRowClass(item) })"

    :row-props="(item) => ({ [':class']: getRowClass(item) })"

manniL•4d ago

not like this. the way you did it should work - better would be moving the row part in an extra component, then you also can use a computed. (So, extracting a "ListItem"/"Row"/"..." Component into it's own) but as said, easier to help with a reproduction can be a simple https://play.vuejs.org playground

RevadikeOP•4d ago

You mean use <template #row> for example?

manniL•4d ago

ah wait, you talk about a v-data-table Didn't see that part which lib is that from?

RevadikeOP•4d ago

vuetify this may work, but I really would like to avoid this, I already use a bunch of other templates, like for specific columns, i'd have to change a lot in the codebase just fow some a row class

manniL•4d ago

might be better on the vuetify discord then. Sadly don't have much experience with that lib.

RevadikeOP•4d ago

well, I suspect the following happens: itemProps gets called with item once, then the result gets v-binded with the row, but since pinia is not yet ready the result is incorrect

manniL•4d ago

correct

manniL•4d ago

also rowProps is only executed once https://github.com/vuetifyjs/vuetify/blob/6dc52fe22d4e1dbe25e51abb947b11eb2725a21f/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx#L152-L158

GitHub

vuetify/packages/vuetify/src/components/VDataTable/VDataTableRows.t...

🐉 Vue Component Framework. Contribute to vuetifyjs/vuetify development by creating an account on GitHub.

RevadikeOP•4d ago

yes

manniL•4d ago

so how about is pinia not ready due to async functions?

RevadikeOP•4d ago

I'm not sure actually, the data should be there

manniL•4d ago

well that might be something to check first then you can debug the fn of course and then, if you find what - await it before rendering the table

RevadikeOP•4d ago

the data is there, so this is even more odd

RevadikeOP•4d ago

lemme see if I made a stupid mistake with my functions I used stringify, so its a real snapshot function works fine

RevadikeOP•4d ago

bro this is so real weirdness

manniL•4d ago

wow

RevadikeOP•4d ago

ok, so those undefined i believe that's the issue here I added this, and it seems working

    inTradelist: state => appid => {
      if (appid === undefined) { return true; }

    inTradelist: state => appid => {
      if (appid === undefined) { return true; }

manniL•4d ago

ah, so your fn was wrong?

RevadikeOP•4d ago

no appid is undefined i think thats the problem? but even if so, I have no idea why because sometimes its not as u can see in the log interesting those undefined are because they are item.item ok using item.item now and its finally working no idea why it sometimes uses item and sometimes item.item it may be a bug with vuetify itself? but whatever, if I use item.item it works and no errors either finally i can rest now so the ultimate fix is doing

    :row-props="({ item }) => ({ class: getRowClass(item) })"

    :row-props="({ item }) => ({ class: getRowClass(item) })"

instead of

    :row-props="(item) => ({ class: getRowClass(item) })"

    :row-props="(item) => ({ class: getRowClass(item) })"

🙄 😮‍💨 Thanks for thinking with me

Gaming

Programming

Responsive component property racing pinia store

Did you find this page helpful?