Mistyped computed getters with parameters using setup function

[Glandos]

I followed #978 using the exact same store.
I am using a Vue 2 project, in an SFC with vue-class-component (yes, this is an already started project…):

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { useStoreCounter } from '@/stores/counter'


@Component
export default class UserDetails extends Vue {
  store = useStoreCounter()

  mounted() {
    this.$log.warn('Store', this.store.isEven, this.store.messageIfEven("ahah"))
  }
}
</script>

However, both Vetur in VSCode and the Typescript checker complain on the messageIfEven saying that:

(property) messageIfEven: string | undefined
Cannot invoke an object which is possibly 'undefined'.Vetur(2722)
This expression is not callable.
  Type 'String' has no call signatures.Vetur(2349)

So it seems that the getter is weirdly unwrapped, since it only retains its Result. But executing the code shows me that messageIfEven is a function.

What did I miss?

[Niushimeng]

I have the same problem when using vue3

[posva]

What does your store look like?
You should use mapStores() in components like that btw

[Glandos]

This was the store from #978, adapted for Vue2:

import { ref, computed } from '@vue/composition-api'
import { defineStore } from 'pinia'

export const useStoreCounter = defineStore('counter', () => {
  // STATES
  const count = ref(0)

  // GETTERS
  const isEven = computed(() => {
    return count.value % 2 === 0
  })

  const messageIfEven = computed(() => {
    return (message: string) => {
      if (!isEven.value) return
      return message
    }
  })

  // ACTIONS
  function increment() {
    count.value++
  }

  return { count, isEven, messageIfEven, increment }
})

I tried to use mapStores in class components, like this:

  storeCounter = useStoreCounter()
  storeUsersData = mapStores(useStoreCounter)
  get storeUsersComputed () {
    return { ...mapStores(useStoreCounter) }
  }

But only the first is "usable", all others have a strange typing in their returned values.

[gurvancampion]

mapStoresdoes't work for me when using class component on a Vue2 project.
I tried:

@Component({
  computed: { ...mapStores(useUserStore) }
})

But I got the following error TS2339: Property 'userStore' does not exist on type when trying to access the store in the component with this.userStore

Seems like doing this way works as expected:

get userStore() {
  return useUserStore()
}