direct-vuex icon indicating copy to clipboard operation
direct-vuex copied to clipboard

Types stop working when returning a value from $store

Open hakonbja opened this issue 3 years ago • 1 comments

Hello,

When I try to return a value from the store inside a computed function like this:

// doesn't work

computed: {
    userFullName: function() {
        return this.$store.direct.state.user.fullName;
                           ^^^^^^
    }
},

I get this error message:

TS2339: Property 'direct' does not exist on type '(() => any) | ComputedOptions<any>'.
  Property 'direct' does not exist on type '() => any'.

However, if I first assign it to a variable and then return it, everything works fine:

// does work

computed: {
    userFullName: function() {
        const userFullName = this.$store.direct.state.user.fullName;
        return userFullName;
    }
},

I create that component with Vue.extend() in case that is important.

Also, using your 2nd suggestion works fine:

import store from "./store"
export default Vue.extend({
...
  computed: {
      userFullName: function() {
          return store.state.user.fullName;
      }
  },
});

But I don't want to have to import store into every component that wants to access it.

Is this a bug or am I doing something wrong?

Btw, this is in Vue 2.16.

Thanks!

hakonbja avatar Aug 18 '21 16:08 hakonbja

I just found out that if the component doesn't have a prop object the typings work just fine. However, once there's a prop object (even if it's empty) the error above shows up.

hakonbja avatar Aug 19 '21 07:08 hakonbja