Constant useStore undefined?

[plweil]

I'm having trouble figuring out when constants for stores become usable. In a child component, I'm using setup() to define constants for two Pinia stores (Pinia is already loaded in the root instance). I then have a method isRemovable() that gets called in the template.

If I use the userStore constant in the method, I get an error that "userStore is undefined", even though userStore is visible under data in Vue Dev Tools. But if I use the full useUserStore() method instead, it works.

So is there a way to ensure that the constant will work in situations like this? What are the rules governing when it is available and when it is not? Mixing constants and full methods for the same thing in the same component feels messy. I don't recall having this type of issue with Vuex.

<template>
[...'<button v-if="isRemovable(item)" :aria-label="`Remove ${removeLabel(item.id)} from project`" >
</template>

<script>
import { useUserStore } from '@/stores/UserStore'
import { useProjectStore } from '@/stores/ProjectStore'
export default {
    setup() {
        const projectStore = useProjectStore()
        const userStore = useUserStore()
        return {
            projectStore, // formStore,
            userStore // coreStore,
        }
    },
props: ['type'],
    
    methods: {
            isRemovable(id) {
            return {
                'editor': this.isAdmin || id !== userStore.currentUser.id,
                'leader': this.isAdmin || id !== userStore.currentUser.id,
                'site': true
            }[this.type]
    }

[posva]

It’s this.userStore
You should use mapStores btw

[plweil]

thank you, @posva