<script lang="ts" setup>
const songStore = useSongStore() // it's pinia store
const song = computed(() => songStore.getCurrentSong.value); // songStore.getCurrentSong is pinia getter. It returns a ref.
</script>

<template>
<!-- songStore.songList is a ref -->
 <li v-for="(song,song_idx) in songStore.songList" 
                  :key="song.id"
                  :class="{'current-play' : song.id === this will be replaced}"
              >
               

              </li>
</template>

<script lang="ts" setup>
const songStore = useSongStore() // it's pinia store
const song = computed(() => songStore.getCurrentSong.value); // songStore.getCurrentSong is pinia getter. It returns a ref.
</script>

<template>
<!-- songStore.songList is a ref -->
 <li v-for="(song,song_idx) in songStore.songList" 
                  :key="song.id"
                  :class="{'current-play' : song.id === this will be replaced}"
              >
               

              </li>
</template>

// SongStore.ts
export const useSongStore = defineStore('songStore', () => {
    const songList = ref<Array<Song>>([
     {
            id: '1',
            singerId: '',
            title: '',
            album: '',
            picture: '',
            lyric: '',
            url: ''
        }
]); 
    let currentSongIdx = ref(0);
    let currentSong = ref<Song>(songList.value[currentSongIdx.value]);
    const getCurrentSong = computed(() => {
            setCurrentSong(songList.value[currentSongIdx.value]);
            return currentSong;
    });
    const setCurrentSong = (song: Song) => {
        currentSong.value = song;
    }
    

 return {songList ,currentSongIdx ,currentSong,getCurrentSong,setCurrentSong  }
}

File SongStore.ts is a Pinia Store. It only returns a ref. I want to access the computed property "song" in :class without changing any variable names?. How to resolve? Thanks

• vue.js

• The question lacks clear problem statement and stackoverflow/help/mcve . What is the problem? It's unknown what songStore.getCurrentSong and songStore.songList are – Estus Flask Commented Feb 10 at 11:50
• Thank you for your corrections, I have added note for related code. – steelhead Commented Feb 11 at 13:21
• Please, provide code instead of describing it. The question needs to contain the entire minimal code to reproduce the problem. Both answers addres real potential issues but it's unknown if they are the only ones. That they have to guess rather than pinpoint the problem means that the question wasn't properly asked, this is against SO rules and may result in closing the question. – Estus Flask Commented Feb 11 at 13:32
• I have added the relevant code. Let's see if that solves my problem. – steelhead Commented Feb 11 at 16:06

3 Answers 3

As stated by Estus Flask, the question it self doesn't state how the store code is defined. Therefor it's hard to understand the context.

My guess is that when you defined the song computed property, it clashed with the song variable in your v-for loop. But this is as far i can guess unless you provide more information.

  <script lang="ts" setup>
    const songStore = useSongStore();

    const songList = computed(() => songStore.songList.value);
    const currentSong = computed(() => songStore.getCurrentSong.value);
  </script>

  <template>
    <ul>
      <li 
        v-for="(song, $song_index) in songList"
        :key="song.id"
        :class="{'current-play' : song.id === currentSong.id}"
      >
        {{ $song_index + 1 }} - {{ song?.name }} 
      </li>
    </ul>
  </template>

Feels like you need to remove .value, since it's a Pinia's getter. The rest seems to be ok, you definitely can access computed properties in your template.

const songStore = useSongStore()
const song = computed(() => songStore.getCurrentSong.value); // <= no ".value"

That there is a necessity to use getCurrentSong.value means there's a problem with how refs are used, because usually they would be unwrapped as store properties. setCurrentSong shouldn't be called inside a computed, it shouldn't contain side effects.

It's not conventional to call computeds get... as they aren't getter functions but read-only refs or properties.

There needs to be no setCurrentSong and currentSong, getCurrentSong can be renamed to currentSong:

const currentSong = computed(() => songList.value[currentSongIdx.value]))

It's possible to use Pinia helper instead of defining computeds manually in a component:

const { currentSong, songList } = storeToRefs(songStore);

Which then could be used as shown in this answer:

:class="{'current-play' : song.id === currentSong.id}"