Defining store with id as first parameter instead of inside options breaks WebStorm Intellisense in Vue templates

[mousesama]

Reproduction

Using WebStorm IDE, using defineStore() function to define a store using id as the first parameter and options object as second makes WebStorm not see any of the internal properties, getters, or actions in Intellisense when used in vue templates, it only sees the internal store values. In the script section, everything works as intended. Moving id into the options object makes Intellisense behave as expected.

Steps to reproduce the behavior

1. Define store using

export const useMyStore = defineStore('myStore', {
    state: () => ({
        myVal: "value",
    }),
})

2. Export store in script of vue component to use in template

export default defineComponent({
  name: "myComponent",
  setup() {
    const myStore = useMyStore()

    return {
      myStore
    }
  }
})

3. Try to use the store in a template eg. <h1> {{ myStore.myVal }} </h1>
4. WebStorm will complain that myVal does not exist in the object and Intellisense/autocomplete on myStore only results in showing internal store values (such as $patch)

Expected behavior

WebStorm will see and recognize my defined values of the store alongside the internal ones.

Actual behavior

WebStorm only sees internal store values

Additional information

I verified the problem exists using the latest Pinia version when using the new defineStore syntax. Moving the id back to the options menu as in the old syntax does not suffer from this problem.
See discussion: #531

[posva]

I don't use WebStorm so I won't be able to help with this but I doubt there is anything to do on Pinia's code as it's just TypeScript. Maybe WebStorm is not using an up to date version of TS?

[mousesama]

Thanks for the replyt. I tried updating to the latest version of WebStorm but that did not fix it. I will try to raise the issue with JetBrains directly.

[aparajita]

I'm seeing similar behavior. What's really weird is WebStorm is correctly inferring the type of state as the result of defineStore(), but when I import the store into a component, the state typing gets lost.

[aparajita]

[mousesama]

I haven't tried this workaround but as I wrote above, a much simpler workaround is to simply use the old syntax of defining a store.
Instead of using

defineStore('myStore', {
  // Stuff here
})

you can use

defineStore({
    id: 'myStore'
    // Stuff here
})

and everything will work correctly as it should.

[aparajita]

I missed that, thank you! 😁

[JackEdwardLyons]

This worked for me, in VS Code, but the docs don't explain that this is a valid option.

[joshkrz]

Thanks, this was one of the reasons autocompletion wasn't working in PHPStorm / WebStorm. I also had to export defineStore by default and not destructure it when importing it. I mentoned more here: #531 (comment)

[intermundos]

Confirming that.

Moving store to export default enables autocompletion.

[kawazoe]

I have noticed a whole bunch of issues with types in WebStorm. This is really confusing as they are using the TypeScript Language Service to get their type information. I have never seen any issue with Angular. This stuff is only happening in vue projects. Here's an example of one of the bugs I have reported: https://youtrack.jetbrains.com/issue/WEB-52619

I recommend you create an issue in their tracker as well. Maybe they'll finally work on a fix if enough people complain...